首先看下需要实现的效果
实现这个效果简单总结分为以下几步：
1、将元素透明
2、增加动画
3、控制动画结束后的状态
4、控制动画执行时间
具体实现步骤如下：
1、将元素透明
opacity:0;
2、增加动画
定义动画：
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
使用动画：
.fadeIn{
animation:fadeIn 1s;
-webkit-animation:fadeIn 1s;
}
3、控制动画结束后的状态
.animation{
animation-fill-mode:both;
-webkit-animation-fill-mode:both;
}
4、控制动画执行时间
$('ul>li').each(function(index,domEle){
//动画开始时间
var startTime='.'+(index*2)+'s';
//为元素添加动画开始时间，并且增加样式
$(domEle).css({'animation-delay':startTime,'-webkit-animation-delay':startTime});
});
完整代码列表
<!DOCTYPE html>
<html>
<head>
<title> CSS3动画控制元素阶梯显示 </title>
<meta charset="UTF-8"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul>li').each(function(index,domEle){
//动画开始时间
var startTime='.'+(index*2)+'s';
//为元素添加动画开始时间
$(domEle).css({'animation-delay':startTime,'-webkit-animation-delay':startTime});
});
});
</script>
<style type="text/css">
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
*{
margin:0px;
padding:0px;
}
ul {
list-style:none;
margin-left:10px;
}
ul li{
font:normal 15px/35px '微软雅黑';
margin-top:10px;
opacity:0;
cursor:pointer;
}
.fadeIn{
animation:fadeIn 1s;
-webkit-animation:fadeIn 1s;
}
.animation{
animation-fill-mode:both;
-webkit-animation-fill-mode:both;
}
ul li span,a{
background:#000;
display:inner-block;
padding:10px 20px 10px 10px;
color:#fff;
}
ul li span:hover,a:hover{background:rgba(0,0,0,0.8)}
a{text-decoration:none;}
ul li:last-child:hover a{text-decoration:underline;}
</style>
</head>
<body>
<ul>
<li class="animation fadeIn"><span>Java编程思想</span></li>
<li class="animation fadeIn"><span>JavaScript高级程序设计</span></li>
<li class="animation fadeIn"><span>Spring Boot从入门到精通</span></li>
<li class="animation fadeIn"><span>JQuery底层原理分析</span></li>
<li class="animation fadeIn"><a href='#'>更多>></a></li>
</ul>
</body>
</html>
网友评论