CSS3动画控制元素阶梯显示
首先看下需要实现的效果
实现这个效果简单总结分为以下几步：
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});
});完整代码列表
<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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！