CSS3动画控制元素阶梯显示

来源：互联网发布：excel一列数据求和编辑：程序博客网时间：2024/05/16 08:33

首先看下需要实现的效果

实现效果

实现这个效果简单总结分为以下几步：

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>

阅读全文

0 0