css动画实现轮播图

最新推荐文章于 2024-10-17 17:15:40 发布

橘子泡水

最新推荐文章于 2024-10-17 17:15:40 发布

阅读量207

点赞数 1

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

本文链接：https://blog.csdn.net/lr_wlr_w/article/details/103881701

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面是HTML代码

<div class="new_banl">
            <ul>
                <li><img src="images/new1.png" alt="图片"></li>
                <li><img src="images/new2.png" alt="图片"></li>
                <li><img src="images/new3.png" alt="图片"></li>
                <li><img src="images/new4.png" alt="图片"></li>
                <li><img src="images/new5.png" alt="图片"></li>
                <li><img src="images/new6.png" alt="图片"></li>
            </ul>
 </div>

下面是css代码

.new_banl{
    width:570px;
    height:310px；
    /* 必须要溢出隐藏 */
    overflow: hidden;
}
.new_banlone ul{
    /* 一定要设宽度*/
    width:3420px;
    /* 调用动画 */
    animation-name: imgMove;
    animation-duration:18s;
    /* 速度曲线*/
    animation-timing-function: cubic-bezier(0, 1.04, 0, 0.99);
    animation-delay: 3s;
    /* 一直播放*/
    animation-iteration-count: infinite;
}
.new_banl ul li{
    /* 向左浮动 */
    float: left;
}
/* 动画定义*/
@keyframes imgMove {
    0% {
    transform: translateX(0px);
    }
    20%{
    transform: translateX(-570px);
    }
    40% {
    transform: translateX(-1140px);
    }
    60% {
    transform: translateX(-1710px);
    }
    80% {
    transform: translateX(-2280px);
    }
    100% {
        transform: translateX(-2850px);
    }