Blogger Information
Blog 29
fans 1
comment 1
visits 24904
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html+css+jq小动画交互
谦谦允水的博客
Original
819 people have browsed it

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>前端第一课</title>

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.js"></script>

</head>

<style>

*{margin: 0;border:0;padding: 0;font-family: 微软雅黑;}

div{width: 500px;height: 300px;background: #fff;box-shadow: 0px 0px 6px #ccc;border-radius: 10px;margin:0 auto;margin-top: 50px;cursor: pointer;}

div>h3{text-align: center;color: #333;line-height: 2em;padding-top:20px;cursor: pointer;font-size: 20px;}

div>p{font-size: 18px;color: #666;line-height: 1.5em;text-indent: 2em;padding: 15px;}

</style>

<script>

window.onload=function(){

$(".h3").hover(function(){

$(this).animate({

fontSize:"24px",

color:'#562'

},"slow")

},function(){

$(this).animate({color:"#333",fontSize:"20px"},"slow")

})

$(".div").hover(function(){

$(this).animate({marginTop:"70px",backgroundColor:"#622",color:"#fff"},"slow");

$(".h3").animate({color:"#fff"},"slow");

$(".div>p").animate({color:"#fff"},"slow")

},function(){

$(this).animate({marginTop:"50px",backgroundColor:"#fff",color:"#666"},"slow");

$(".h3").animate({color:"#333"},"slow");

$(".div>p").animate({color:"#666"},"slow")

})

}

</script>

<body>

<div>

<h3>PHP中文网第二期网络直播培训课</h3>

<p>每晚20点准时开播~源自于长期市场调研,学员反馈,汇总出最实用的PHP及其周边技术,学员学习本课程之后,可以快速融入企业开发环境中。涵盖PHP及其周边主要技术,可以适应web网站建设,微信等PHP应用领域。<br>谦谦允水</p>

</div>

查看实例

</body>

</html>

_2084301101_IMG20180316200345_1521201832000_wifi__看图王.jpg

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post