用html和css3实现简单的轮播效果，没有任何的js

最新推荐文章于 2024-07-14 10:34:53 发布

青丝不压头颅

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量979

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_45630548/article/details/119656292

版权

CSS 动画轮播效果图片布局关键帧

关键词由CSDN通过智能技术生成

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给最外层的盒子设置和轮播图片一样的大小，
        并且将图片向左浮动，这样轮播的几张图片就是横向排列的，
        最后将超出部分隐藏起来 */
        
        .box1 {
            width: 270px;
            height: 275px;
            overflow: hidden;
        }
        /* 装图片的那个盒子的宽度是所有盒子宽度之后，这样才能完全装下
        所有的图片，实现轮播效果 */
        
        .box2 {
            width: 1080px;
            height: 275px;
            /* 第一个值：animation-name  轮播的名称
                第二个值：animation-duration 轮播全部图片的一个周期，默认时间是0
                第三个值：animation-timing-function 规定轮播的速度曲线，这里使用的liner规定轮播的速度从头到尾都是一样的
                第四个值：animation-iteration-count 规定动画应该无限次播放
            */
            animation: name 3s linear infinite;
        }
        /* 清除浮动 */
        
        .cf::after {
            content: '';
            display: inline-block;
            clear: both;
        }
        /* 图片浮动 */
        
        img {
            float: left;
            width: 270px;
            height: 275px;
        }
        
        @keyframes name {
            0%,
            25% {
                margin-left: 0;
            }
            30%,
            50% {
                margin-left: -270px;
            }
            55%,
            75% {
                margin-left: -540px;
            }
            80%,
            100% {
                margin-left: -810px;
            }
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2 cf">
            <img src="images/pic01.jpg">
            <img src="images/pic02.jpg">
            <img src="images/pic03.jpg">
            <img src="images/pic04.jpg">
        </div>
    </div>
</body>

</html>

青丝不压头颅

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
用html和css3实现简单的轮播效果，没有任何的js

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫