CSS3动画完成两种轮播图

「爱情、让人受尽委屈。」 2022-10-21 03:41 167阅读 0赞

素材链接： [https://pan.baidu.com/s/1Zdz3p9mRp-Q2e6tbjAaawg][https_pan.baidu.com_s_1Zdz3p9mRp-Q2e6tbjAaawg]

提取码： ua78

# 第一种 #

### 效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70][]

### 源代码： ###

<!DOCTYPE html>
    
    <html lang="en">
    
    
    
    <head>
    
        <meta charset="UTF-8">
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Document</title>
    
    </head>
    
    
    
    <body>
    
        <div class="main">
    
            <div class="pic">
    
                <img src="img13/1.jpg" />
    
                <img src="img13/2.jpg" />
    
                <img src="img13/3.jpg" />
    
                <img src="img13/4.jpg" />
    
            </div>
    
    
    
            <ul>
    
                <li class="f"></li>
    
                <li class="s"></li>
    
                <li class="t"></li>
    
                <li class="fo"></li>
    
            </ul>
    
    
    
        </div>
    
    </body>
    
    
    
    </html>
    
    <style>
    
        .main {
    
            width: 300px;
    
            /* border: 1px solid red; */
    
            overflow: hidden;
    
            position: relative;
    
        }
    
        
    
        .pic {
    
            width: 1200px;
    
            font-size: 0;
    
            animation: lb 16s infinite;
    
        }
    
        
    
        .pic img {
    
            width: 300px;
    
        }
    
        
    
        ul {
    
            width: 120px;
    
            height: 16px;
    
            position: absolute;
    
            bottom: 10px;
    
            text-align: center;
    
            left: 50px;
    
        }
    
        
    
        li {
    
            list-style: none;
    
            float: left;
    
            width: 16px;
    
            height: 16px;
    
            border-radius: 50%;
    
            background-color: white;
    
            margin: 6px;
    
        }
    
        
    
        .f {
    
            animation: f 16s linear infinite;
    
            animation-delay: 0s;
    
        }
    
        
    
        .s {
    
            animation: s 16s linear infinite;
    
            animation-delay: 2s;
    
        }
    
        
    
        .t {
    
            animation: t 16s linear infinite;
    
            animation-delay: 6s;
    
        }
    
        
    
        .fo {
    
            animation: fo 16s linear infinite;
    
            animation-delay: 10s;
    
        }
    
        
    
        @keyframes lb {
    
            0%,
    
            100% {
    
                transform: translate(0);
    
            }
    
            23% {
    
                transform: translate(-300px);
    
            }
    
            46% {
    
                transform: translate(-600px);
    
            }
    
            69% {
    
                transform: translate(-900px);
    
            }
    
            92% {
    
                transform: translate(0);
    
            }
    
        }
    
        
    
        @keyframes f {
    
            0%,
    
            100% {
    
                background-color: #777;
    
            }
    
            45% {
    
                background-color: white;
    
            }
    
            90% {
    
                background-color: white;
    
            }
    
            95% {
    
                background-color: #777;
    
            }
    
        }
    
        
    
        @keyframes s {
    
            0%,
    
            100% {
    
                background-color: #777;
    
            }
    
            45% {
    
                background-color: white;
    
            }
    
            90% {
    
                background-color: white;
    
            }
    
            95% {
    
                background-color: #777;
    
            }
    
        }
    
        
    
        @keyframes t {
    
            0%,
    
            100% {
    
                background-color: #777;
    
            }
    
            45% {
    
                background-color: white;
    
            }
    
            90% {
    
                background-color: white;
    
            }
    
            95% {
    
                background-color: #777;
    
            }
    
        }
    
        
    
        @keyframes fo {
    
            0%,
    
            100% {
    
                background-color: #777;
    
            }
    
            45% {
    
                background-color: white;
    
            }
    
            90% {
    
                background-color: white;
    
            }
    
            95% {
    
                background-color: #777;
    
            }
    
        }
    
    </style>

# 第二种 #

### 效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70 1][]

### 源代码： ###

[https_pan.baidu.com_s_1Zdz3p9mRp-Q2e6tbjAaawg]: https://pan.baidu.com/s/1Zdz3p9mRp-Q2e6tbjAaawg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70]: /images/20221021/7e4590ac91b5472d9fbc0a2595ffe442.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70 1]: /images/20221021/95cc36875dc94ff988efb75bedc97942.png