CSS3动画控制元素阶梯显示

最新推荐文章于 2024-05-14 09:36:49 发布

小老虎Love

最新推荐文章于 2024-05-14 09:36:49 发布

阅读量2.1k

点赞数

文章标签： css3 动画

本文链接：https://blog.csdn.net/tenghu8888/article/details/78601712

版权

首先看下需要实现的效果

实现效果

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

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>