您的位置：首页 > 其它

手机体验细节小动画

2015-05-04 15:05 190 查看

1.展开收起

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 列表动画 </title>
<style>

.list { height: 100px; line-height: 100px; text-align: center; margin-bottom: 10px; background-color: #ccc; border-top: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; }

.anim-slide:nth-of-type(1) {
-webkit-animation: slide .5s ease 0s backwards;
animation: slide .5s ease 0s backwards
}

.anim-slide:nth-of-type(2) {
-webkit-animation: slide .5s ease .1s backwards;
animation: slide .5s ease .1s backwards
}

.anim-slide:nth-of-type(3) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}

.anim-slide:nth-of-type(4) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}

.anim-slide:nth-of-type(5) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}

.anim-slide:nth-of-type(6) {
-webkit-animation: slide .5s ease .2s backwards;
animation: slide .5s ease .2s backwards
}

@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translate3d(0,32px,0);
transform: translate3d(0,32px,0)
}

100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
}

@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translate3d(0,32px,0);
transform: translate3d(0,32px,0)
}

100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
}

</style>
</head>
<body>

<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>

</body>
</html>


View Code

待续...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航