仅使用CSS完成图片轮播

左手的ㄟ右手 2023-06-23 05:59 9阅读 0赞

# 仅使用CSS完成图片轮播 #

##### 代码 #####

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> img{ 
                   position: absolute;  /*让四张图片重叠*/
                   opacity: 0;     /*设置透明度为0*/
                   animation: Lunbo 12s Infinite;   /*设置动画组 Infinite为无限循环*/
               }
               /*动画效果*/
               @keyframes Lunbo { 
                      0%{ opacity: 0}
                      2%{ opacity: 1}
                      24%{ opacity: 1}
                      25%{ opacity: 0}
               }
               /*图片延迟*/
               img:nth-child(0){ animation-delay: 0s}
               img:nth-child(1){ animation-delay: 3s}
               img:nth-child(2){ animation-delay: 6s}
               img:nth-child(3){ animation-delay: 9s}
           </style>
    </head>
    <body>
            <div>
                <img src="../image/1.jpg" alt="">
                <img src="../image/2.jpg" alt="">
                <img src="../image/3.jpg" alt="">
                <img src="../image/4.jpg" alt="">
            </div>
    </body>
    </html>

##### 思维 #####

通过调节透明度的方式来实现图片轮播，图片每12秒完成一次循环，每张图片只显示3秒即0%—25%时opcity值为1（显示），其他时候值为0（隐藏)。然后设置图片延迟3s。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvX29sb19vbA_size_16_color_FFFFFF_t_70]  
如图方框是显示时间 横线是隐藏时间，每张图片12秒，把他们显示的时间给错开。

[转载自哔哔哩哩地址，有空的可以去看看][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvX29sb19vbA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191217192328291.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvX29sb19vbA==,size_16,color_FFFFFF,t_70
[Link 1]: https://www.bilibili.com/video/av15393502?from=search&seid=5610491624395164034