小米官网鼠标经过特效
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>小米官网鼠标经过特效</title>
<script type=”text/javascript” src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<style type=”text/css”>
*{margin:0;padding:0;}
body{background: #f5f5f5;}
li{list-style: none;}
.demo{
width:80%;
margin:50px auto;
height:300px;
}
.demo ul li{
float:left;
height:300px;
width:22%;
background: #fff;
margin-left:20px;
-webkit-transition: all .2s linear;
transition: all .2s linear;
position: relative;
}
.demo-active {
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0)
}
.layer{
height:0px;
background: #ff6700;
position: absolute;
bottom:0;
left:0;
width:98%;
opacity: 0;
filter: alpha(opacity=0) \9;
-webkit-transition: all .2s linear;
transition: all .2s linear;
color: #fff;
padding:1%;
text-align: center;
}
.demo-active .layer{
opacity: 1;
filter: alpha(opacity=100) \9;
height:50px;
}
</style>
</head>
<body>
<div class=”demo”>
<ul>
<li>
<div class=”layer”>小米官网鼠标经过特效</div>
</li>
<li>
<div class=”layer”>小米官网鼠标经过特效</div>
</li>
<li></li>
<li></li>
</ul>
</div>
<script type=”text/javascript”>
$(document).ready(function(){
var demo = $(“.demo ul li”);
$(demo).mouseover(function(){
$(this).addClass(“demo-active”);
});
$(demo).mouseout(function(){
$(this).removeClass(“demo-active”);
});
});
</script>
</body>
</html>
欢迎关注小程序，感谢您的支持！
