CSS3实现轮播图效果

最新推荐文章于 2024-06-29 11:45:56 发布

豆i浆

最新推荐文章于 2024-06-29 11:45:56 发布

阅读量1.7k

点赞数

分类专栏： css css3 文章标签： css3 css

本文链接：https://blog.csdn.net/sinat_19327991/article/details/72232397

版权

css 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css3

8 篇文章 0 订阅

订阅专栏

因为CSS的局限性，所以只能做出图片无限循环播放的效果，和图片点击链接
其他的因为效果不完美所以摒弃了

效果图预览：

这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            .container{
                margin: 0 auto;
                width: 300px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }
            .img_container{
                position: absolute;
                width: 1500px;
                animation:mycolor 10s;
                -moz-animation:mycolor 10s; 
                -webkit-animation:mycolor 10s; 
                -o-animation:mycolor 10s; 
                animation-iteration-count: infinite;
            }
            @keyframes  mycolor{
                0%{
                    left: 0;
                }   
                20%{
                    left: -300px;
                }
                40%{
                    left: -600px;
                }
                60%{
                    left: -900px;
                }
                80%{
                    left: -1200px;
                }
                100%{
                    left: 0;
                }
            }
            .img_container li{
                width: 300px;
                height: 300px;
                float: left;
            }
            .img_container li:nth-child(1){
                background-color: #868686;
            }
            .img_container li:nth-child(2){
                background-color: #FF0000;
            }
            .img_container li:nth-child(3){
                background-color: #228B22;
            }
            .img_container li:nth-child(4){
                background-color: blue;
            }
            .img_container li:nth-child(5){
                background-color: brown;
            }
            .img_container:hover{

            }
            .img_container li a{
                display: block;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <ul class="img_container">
                <li>
                    <a href="#">
                        <img src="" alt="" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="" alt="" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="" alt="" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="" alt="" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="" alt="" />
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

豆i浆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现轮播图效果

因为CSS的局限性，所以只能做出图片无限循环播放的效果，和图片点击链接其他的因为效果不完美所以摒弃了效果图预览：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{
复制链接

扫一扫

专栏目录