教公司前端妹子用纯css3实现轮播图~

最新推荐文章于 2024-08-19 10:59:54 发布

Bender_hu

最新推荐文章于 2024-08-19 10:59:54 发布

阅读量119

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/hutao2333/article/details/107529340

版权

接水的时候碰到了公司的一个前端妹子，她向我请教了下轮播图的写法，我就决定在她面前秀一波~
111
222

大概效果就是这样了，就是简单的用了CSS3的animation的动画属性，废话少说上代码~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 533px;
            height: 300px;
            margin: auto;
            background-image: url(img/01.jpg), url(img/02.jpg), url(img/03.jpg), url(img/04.jpg), url(img/01.jpg);
            background-repeat: no-repeat;
            background-position: 0, 533px, 1066px, 1599px, 2132px;
            animation: lunbo 15s infinite forwards;
        }
        
        @keyframes lunbo {
            0% {
                background-position: 0, 533px, 1066px, 1599px, 2132px;
            }
            25% {
                background-position: -533px, 0, 533px, 1066px, 1599px;
            }
            50% {
                background-position: -1066px, -533px, 0, 533px, 1066px;
            }
            75% {
                background-position: -1599px, -1066px, -533px, 0, 533px;
            }
            100% {
                background-position: -2132px, -1599px, -1066px, -533px, 0;
            }
        }
    </style>
</head>

<body>
    <div>
        <!-- <img src="img/01.jpg" alt="">
        <img src="img/02.jpg" alt="">
        <img src="img/03.jpg" alt="">
        <img src="img/04.jpg" alt=""> -->
    </div>
</body>

</html>

Bender_hu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
教公司前端妹子用纯css3实现轮播图~

接水的时候碰到了公司的一个前端妹子，她向我请教了下轮播图的写法，我就决定在她面前秀一波~ 大概效果就是这样了，就是简单的用了CSS3的animation的动画属性，废话少说上代码~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫