一个简单的图片列表动效
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(e) {
var h=$(".list span").width()
$(".list span").css("height",h)
$(".list span").css("line-height",h+"px")
$(window).resize(
function(){
h=$(".list span").width()
$(".list span").css("height",h)
$(".list span").css("line-height",h+"px")
}
)
$(".list").css({opacity:0})
$(".btn").toggle(
function(){
$(".btn span:eq(0)").addClass("btn_1")
$(".btn span:eq(1)").addClass("btn_2")
$(".bg img").animate({opacity:0.3})
$(".list").animate({opacity:1})
},function(){
$(".btn span:eq(0)").removeClass("btn_1").addClass("btn_1_c")
$(".btn span:eq(1)").removeClass("btn_2").addClass("btn_2_c")
setTimeout(function(){
$(".btn span").removeClass()
},300)
$(".bg img").animate({opacity:1})
$(".list").animate({opacity:0})
}
)
});
</script>
<style>
*{font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
img{display:block;}
html,body{height:100%;}
body{margin:0;background-color:black;}
.btn{position:absolute;background-color:#F66;width:20px;height:20px;padding:10px;cursor:pointer;right:0;top:0;z-index:2;}
.btn span{position:absolute;width:20px;height:4px;background-color:white;top:50%;margin-top:-2px;}
@-webkit-keyframes btn_1{
from{-webkit-transform:rotate(90deg);}
to{-webkit-transform:rotate(135deg);}
}
@-webkit-keyframes btn_2{
from{-webkit-transform:rotate(0);}
to{-webkit-transform:rotate(45deg);}
}
@-webkit-keyframes btn_1_c{
from{-webkit-transform:rotate(135deg);}
to{-webkit-transform:rotate(90deg);}
}
@-webkit-keyframes btn_2_c{
from{-webkit-transform:rotate(45deg);}
to{-webkit-transform:rotate(0);}
}
.btn span:nth-child(1){-webkit-transform:rotate(90deg);}
.btn_1{-webkit-animation:btn_1 .3s forwards;}
.btn_2{-webkit-animation:btn_2 .3s forwards;}
.btn_1_c{-webkit-animation:btn_1_c .3s forwards;}
.btn_2_c{-webkit-animation:btn_2_c .3s forwards;}
.bg{overflow:hidden;height:100%;}
.bg img{width:260%;margin-left:-100%;}
.list_box{width:100%;position:fixed;left:0;top:0;z-index:1;}
.list{padding:10px;}
.list div{float:left;}
@media (max-width:1920px){.list div{width:20%;}.bg img{width:140%;margin-left:0;margin-top:-100px;}}
@media (max-width:1000px){.list div{width:25%;}.bg img{width:260%;margin-left:-100%;margin-top:-100px;}}
@media (max-width:640px){.list div{width:33.3%;}.bg img{width:300%;margin-left:-100%;margin-top:0;}}
.list div span{display:block;background-color:gray;margin:10px;text-align:center;color:rgba(255,255,255,0.4);}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="bg">
<div class="list_box">
<div class="list">
<div>
<span style="background:#666;">IMAGE</span>
</div>
<div>
<span style="background:#696;">IMAGE</span>
</div>
<div>
<span style="background:#093">IMAGE</span>
</div>
<div>
<span style="background:#33F;">IMAGE</span>
</div>
<div>
<span style="background:#9C3;">IMAGE</span>
</div>
<div>
<span style="background:#F90;">IMAGE</span>
</div>
<div>
<span style="background:#3CC">IMAGE</span>
</div>
<div>
<span style="background:#C69;">IMAGE</span>
</div>
<div>
<span style="background:#F63;">IMAGE</span>
</div>
</div>
</div>
<img src="img/bg.jpg">
</div>
<div class="btn">
<span></span>
<span></span>
</div>
</body>
</html>