首先看下需要實(shí)現(xiàn)的效果
實(shí)現(xiàn)這個(gè)效果簡單總結(jié)分為以下幾步：
1、將元素透明
2、增加動(dòng)畫
3橱健、控制動(dòng)畫結(jié)束后的狀態(tài)
4、控制動(dòng)畫執(zhí)行時(shí)間
具體實(shí)現(xiàn)步驟如下：
1沙廉、將元素透明
opacity:0;
2拘荡、增加動(dòng)畫
定義動(dòng)畫：
@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
使用動(dòng)畫：
.fadeIn{
animation:fadeIn 1s;
-webkit-animation:fadeIn 1s;
}
3、控制動(dòng)畫結(jié)束后的狀態(tài)
.animation{
animation-fill-mode:both;
-webkit-animation-fill-mode:both;
}
4撬陵、控制動(dòng)畫執(zhí)行時(shí)間
$('ul>li').each(function(index,domEle){
//動(dòng)畫開始時(shí)間
var startTime='.'+(index*2)+'s';
//為元素添加動(dòng)畫開始時(shí)間珊皿，并且增加樣式
$(domEle).css({'animation-delay':startTime,'-webkit-animation-delay':startTime});
});
完整代碼列表
<!DOCTYPE html>
<html>
<head>
<title> CSS3動(dòng)畫控制元素階梯顯示 </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){
//動(dòng)畫開始時(shí)間
var startTime='.'+(index*2)+'s';
//為元素添加動(dòng)畫開始時(shí)間
$(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高級(jí)程序設(shè)計(jì)</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>
