CSS3动画效果实现轮播图

最新推荐文章于 2024-08-05 22:52:29 发布

小荣的网络开发日志

最新推荐文章于 2024-08-05 22:52:29 发布

阅读量206

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_44000173/article/details/115441239

版权

css3 html css

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS3动画效果实现轮播图

直接看效果

在这里插入图片描述

代码，根据需要自己调整参数.

学习动漫效果可以去上一篇文章找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画属性实现轮播图</title>
    
    <style>
    <!--设置banner样式 -->
        .banner{
            text-align: center;
            margin:0px auto;
            width: 700px;
            height: 700px;
            overflow: hidden;
        /* 设置超出banner范围的图片隐藏*/
        }
        .banner-box{
            width: 2800px;
            height: 700px;
        /* 添加动画*/
            animation:myname 10s infinite  1s alternate;
        }
        .banner-box:hover{
            /*鼠标悬停轮播图暂停*/
            animation-play-state: paused;
        }
        .banner-box>img{
            float: left;
        /* 设置图片左浮动*/
        }
        @keyframes myname {
            /*设置动画，myname是动画名字，可更改*/
            33%{
                margin-left: -700px;
            }
            66%{
                margin-left: -1400px;
            }
            100%{
                margin-left: -2100px;
            }
        }
    </style>
</head>
<body>
<div class="banner">
    <div class="banner-box">
        <img src="img/测试.png" height="700" width="700"/>
        <img src="img/查看数据.png" height="700" width="700"/>
        <img src="img/办公.png" height="700" width="700"/>
        <img src="img/2021业绩推广.png" height="700" width="700"/>
    </div>
</div>
</body>
</html>