Acticle 15：css3动画小例子（幻灯片播放）

最新推荐文章于 2022-01-24 20:55:04 发布

颜洁

最新推荐文章于 2022-01-24 20:55:04 发布

阅读量280

点赞数

分类专栏： css3动画的相关属

本文链接：https://blog.csdn.net/amytun_yu/article/details/52925741

版权

css3动画的相关属专栏收录该内容

2 篇文章 0 订阅

订阅专栏

幻灯片播放的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        /*<!--兼容性不大好-->*/
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            ul{
                width:100%;
                height:100%;
                position: fixed;
            }
            ul li{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0; 
                animation:cartoon 10s linear infinite;/*animation为动画属性：有四个参数，1.代表动画的名称，2.动画完成的时长 3.动画的运动方式 4.运动的次数*
                /*1.ease-in-out显示的速度先快后慢   2.linear 匀速  3.ease速度由快到慢，逐渐变慢  4.ease-out速度越来越慢 5.ease-in速度越来越快*/
                }
            img{
                    width:100%;
                    height: 100%;
                }
                ul li:nth-of-type(1){
                    animation-delay: 0s;/*animation-delay动画等待开始的时间*/
                    -moz-animation-delay: 0s;
                }
                ul li:nth-of-type(2){
                    animation-delay: 2s;
                    -moz-animation-delay: 2s;
                }
                ul li:nth-of-type(3){
                    animation-delay: 4s;
                    -moz-animation-delay: 4s;
                }
                ul li:nth-of-type(4){
                    animation-delay: 6s;
                    -moz-animation-delay: 6s;
                }
                ul li:nth-of-type(5){
                    animation-delay: 8s;
                    -moz-animation-delay: 8s;
                }
                ul li:nth-of-type(6){
                    animation-delay: 10s;
                    -moz-animation-delay: 10s;
                }
            @keyframes cartoon{     /*a.@keyframes:@keyframes 规则用于创建动画,即为想让动画动起来，需要绑定@keyframe规则   
                b.@keyframes规则：一般用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
                c.0% 是动画的开始，100% 是动画的完成。*/
                0%{opacity: 0;}    /*每张图片都经历这样一个透明度由0到1，再由1到0的过程，即：图片慢慢的出现，之后又慢慢的消失。*/
                20%{opacity: 1;}
                40%{opacity: 1;}
                60%{opacity: 1;}
                80%{opacity: 1;}
                100%{opacity: 0;}
            }
        </style>
    </head>
    <body>
        <ul>
            <li><img src="img/1.jpeg"/></li>
            <li><img src="img/2.jpg"/></li>
            <li><img src="img/3.jpg"/></li>
            <li><img src="img/4.jpg"/></li>
            <li><img src="img/5.jpg"/></li>
            <li><img src="img/6.jpeg"/></li>
        </ul>
    </body>
</html>