CSS实现幻灯片效果

最新推荐文章于 2024-07-07 20:44:40 发布

LT...

最新推荐文章于 2024-07-07 20:44:40 发布

阅读量1.4k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/tao_meng_/article/details/113474168

版权

使用css代码实现一个简单又粗糙的幻灯片效果

话不多说，直接上我粗糙的代码了！

1.通过position定位+animation动画实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css3 实现幻灯片效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .huanDengP {
            width: 600px;
            height: 400px;
            margin: 50px auto 0;
            overflow: hidden;
            box-shadow:  0 0 5px rgba(0,0,0,1);
            position: relative;
        }
        .huanDengP ul {
            width: 2000px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation-name: "loops"; /*检索或设置对象所应用的动画名称*/
            -webkit-animation-duration: 10s; /*检索或设置对象动画的持续时间*/
            -webkit-animation-iteration-count: infinite;  /*检索或设置对象动画的循环次数，此处的"infinite"为无限循环的意思*/
        }
        .huanDengP ul li {
            width: 600px;
            height: 100%;
            float: left;
        }
        .huanDengP ul li img {
            width: 600px;
            height: 100%;
        }
        /*动画名称和上面设置的动画名称一样*/
        @keyframes loops {
            /*下面是动画过程*/
            0% {
                left: 0px;
            }

            50% {
                left: -600px;
            }

            100% {
                left: -1200px;
            }
        }

    </style>
</head>
<body>
    <div class="huanDengP">
        <ul>
            <li><img src="https://litaoye.oss-cn-beijing.aliyuncs.com/1.jpg"/></li>
            <li><img src="https://litaoye.oss-cn-beijing.aliyuncs.com/2.jpg"/></li>
            <li><img src="https://litaoye.oss-cn-beijing.aliyuncs.com/3.jpg"/></li>
        </ul>
    </div>
</body>
</html>

也可使用背景图片，这样就不需要用到position了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css3 实现幻灯片效果</title>
    <style type="text/css">
        .huanDengP {
            width: 600px;
            height: 400px;
            margin: 50px auto 0;
            overflow: hidden;
            box-shadow:  0 0 5px rgba(0,0,0,1);
            background-size: cover;
            background-position: center;
            -webkit-animation-name: "loops"; /*检索或设置对象所应用的动画名称*/
            -webkit-animation-duration: 10s; /*检索或设置对象动画的持续时间*/
            -webkit-animation-iteration-count: infinite;  /*检索或设置对象动画的循环次数，此处的"infinite"为无限循环的意思*/
        }
        /*动画名称和上面设置的动画名称一样*/
        @keyframes loops {
            /*下面是动画过程*/
            0% {
                background: url(https://litaoye.oss-cn-beijing.aliyuncs.com/1.jpg) no-repeat;
            }

            50% {
                background: url(https://litaoye.oss-cn-beijing.aliyuncs.com/2.jpg) no-repeat;
            }

            100% {
                background: url(https://litaoye.oss-cn-beijing.aliyuncs.com/3.jpg) no-repeat;
            }
        }

    </style>
</head>
<body>
    <div class="huanDengP"></div>
</body>
</html>

2.通过transform属性和animation动画实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css3 实现幻灯片效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .huanDengP {
            width: 600px;
            height: 400px;
            margin: 50px auto 0;
            overflow: hidden;
            box-shadow:  0 0 5px rgba(0,0,0,1);
        }
        .huanDengP ul {
            width: 2000px;
            height: 100%;
            animation: loops 10s infinite ease;
        }
        .huanDengP ul li {
            width: 600px;
            height: 100%;
            float: left;
        }
        .huanDengP ul li img {
            width: 600px;
            height: 100%;
        }
        /*动画名称和上面设置的动画名称一样*/
        @keyframes loops {
            /*下面是动画过程*/
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(-600px);
            }

            100% {
                transform: translateX(-1200px);
            }
        }

    </style>
</head>
<body>
    <div class="huanDengP">
        <ul>
            <li><img src="https://litaoye.oss-cn-beijing.aliyuncs.com/1.jpg"/></li>
            <li><img src="https://litaoye.oss-cn-beijing.aliyuncs.com/2.jpg"/></li>
            <li><img src="https://litaoye.oss-cn-beijing.aliyuncs.com/3.jpg"/></li>
        </ul>
    </div>
</body>
</html>