animation动画+关键帧实现轮播图效果（再次学习）!

再次遇到要实现轮播图效果的时候，发现还是不怎么会，因为对js还没有熟练使用，只希望使用h5和css3实现效果

虽然之前已经学习了一遍了，但是还是不熟练，再次学习一下了

这次的可作为套板使用，无序列表为框架模型，动画关键帧实现轮播效果，话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #wrapper{
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        ul{
            width: 2000px;
            position: absolute;
            animation: mybox 10s  infinite normal;
        }
        li{
            float: left;
        }
        li>img{
            width: 400px;
            height: 300px;
        }
        @keyframes mybox{
            0%{
                left: 0;
            }
            25%{
                left: -400px;
            }
            50%{
                left: -800px;
            }
            75%{
                left: -1200px;
            }
            100%{
                left: -1600px;
            }
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <ul>
            <li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
            <li><img src="http://img.netbian.com/file/2023/0707/235106Yxqlc.jpg"></li>
            <li><img src="http://img.netbian.com/file/2023/0704/163037oy7Cf.jpg"></li>
            <li><img src="http://img.netbian.com/file/2023/0522/235702c1FPG.jpg"></li>
            <li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
        </ul>
    </div>
</body>
</html>

注意：通配符样式是必要的，不知道为啥；

图片为了实现最后一张和第一张做到无缝衔接过渡，需要设置为同一张图片，不知道为啥；

定位样式设置是必要的，不知道为啥；

animation的animation-timing-function属性及动画的速度曲线，默认是ease，此处没有设置应该是默认的，但效果和ease-in-out一样，不知道为啥；

唉，继续学习吧还是。

效果如下所示：

完毕。

posted @ 2023-07-11 17:20  Mickeybo  阅读(140)  评论(0)  编辑  收藏  举报