纯css实现轮播图动画

最新推荐文章于 2024-06-11 20:03:48 发布

weixin_49702294

最新推荐文章于 2024-06-11 20:03:48 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/weixin_49702294/article/details/108038568

版权

<div>
        <img src="./img/watch_bj.jpg" alt="">
        <img src="./img/watch_bj02.jpg" alt="">
        <img src="./img/watch_bj03.jpg" alt="">
        <img src="./img/watch_bj04.jpg" alt="">
        <img src="./img/watch_bj05.jpg" alt="">
    </div>

<style>
        div{
            width: 1920px;
            height: 556px;
            overflow: hidden;
            position: relative;
        }

        div>img {
            position: absolute;
            top: 0;
            left: 0;
        }
         div img:nth-child(1) {
            opacity: 1;
            animation: tu 15s infinite;
        }

        div img:nth-child(2) {
            opacity: 0;
            animation: tu2 15s infinite;
        }

        div img:nth-child(3) {
            opacity: 0;
            animation: tu3 15s infinite;
        }

        div img:nth-child(4) {
            opacity: 0;
            animation: tu4 15s infinite;
        }

        div img:nth-child(5) {
            opacity: 0;
            animation: tu5 15s infinite;
        }

        @keyframes tu {

            0%,
            8% {
                opacity: 1;
            }

            16%,
            90% {
                opacity: 0;
            }
        }

        @keyframes tu2 {

            0%,
            8% {
                opacity: 0;
            }

            16%,
            24% {
                opacity: 1;
            }

            32%,
            100% {
                opacity: 0;
            }
        }
        @keyframes tu3 {

            0%,
            32% {
                opacity: 0;
            }

            40%,
            48% {
                opacity: 1;
            }

            56%,
            100% {
                opacity: 0;
            }
        }
        @keyframes tu4 {

            0%,
            56% {
                opacity: 0;
            }

            59%,
            66% {
                opacity: 1;
            }

            70%,
            100% {
                opacity: 0;
            }
        }
        @keyframes tu5 {

            0%,
            76% {
                opacity: 0;
            }

            82%,
            90% {
                opacity: 1;
            }

            90%,
            100% {
                opacity: 0;
            }
        }
    </style>