如何使用纯CSS3实现图片轮播的效果

2020-03-24 18:14:56

字体：大中小

来源：转载

供稿：网友

本篇文章给大家带来的内容是关于如何使用纯CSS3实现图片轮播的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style type="text/css">*{     margin: 0;    padding: 0;     text-decoration: none;}ul{    list-style: none;}ul li{    width: 400px;    height:200px;}#container{    position: relative;    width: 400px;    height: 200px;    overflow: hidden;/*隐藏溢出的图片*/}.pic{    width:1600px;/*4张图的宽度*/    position: absolute;/*基于父容器进行定位*/    left:0;    animation-name: carousel;    animation-duration: 12s;    animation-iteration-count: infinite;/*//动画调用可以简写*/}@keyframes carousel {    0%,30%{        left: 0;    }    35%,65%{        left: -400px;    }    70%,99%{        left: -800px;    }    100%{        left: -1200px;    }   }.pic li{    float: left;    background: #5dd94e;}.pic li img {    width: 400px;    height: 200px;}</style><body><p id="container">    <ul class="pic">        <li><a href="javascript:;">111</a></li>        <li><a href="javascript:;">222</a></li>        <li><a href="javascript:;">333</a></li>        <li><a href="javascript:;">111</a></li><!-- 克隆第一张 -->    </ul>        </p>   </body></html>

相关推荐：

css3怎么让图片实现不停旋转的效果？【详解】

如何利用css来设置文本的背景颜色？css设置背景颜色代码详解

以上就是如何使用纯CSS3实现图片轮播的效果的详细内容，更多请关注其它相关文章！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html和css有什么区别

下一篇：html下拉菜单怎么做？高手教你如何在HTML和CSS中创建下拉菜单