CSS3无缝滚动

最新推荐文章于 2024-03-20 14:51:20 发布

Deng_1957

最新推荐文章于 2024-03-20 14:51:20 发布

阅读量340

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/truesword/article/details/79272856

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

1.html

<section id="client">
    <div id="guester">
        <ul>
            <li><img src="img/logo/huifenqi.png"></li>
            <li><img src="img/logo/jingdong.png"></li>
            <li><img src="img/logo/zhonghang.png"></li>
            <li><img src="img/logo/wenshan.png"></li>
            <li><img src="img/logo/xinlang.png"></li>
            <li><img src="img/logo/bilibili.png"></li>

            <li><img src="img/logo/huifenqi.png"></li>
            <li><img src="img/logo/jingdong.png"></li>
            <li><img src="img/logo/zhonghang.png"></li>
            <li><img src="img/logo/wenshan.png"></li>
            <li><img src="img/logo/xinlang.png"></li>
            <li><img src="img/logo/bilibili.png"></li>
        </ul>
    </div>
</section>

2.css3

#guester{
    width: 100%;
    position: absolute;
}
#guester ul{
    width: 200%;
    height: 48px;
    line-height: 48px;
    position: absolute;
    list-style-type: none;
    animation-name: client_move;
    animation-duration: 30s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
}

#guester ul li{
    float: left;
    width: 8.3%;
    overflow: hidden;
}

#guester ul:hover{
    animation-play-state: paused;
}

@keyframes client_move {
    0% {left: 0}
    100%{left:-100%}
}
@-webkit-keyframes client_move {
    0% {left: 0%}
    100%{left:-100%}
}
@-moz-keyframes client_move {
    0% {left: 0%}
    100%{left:-100%}
}
@-o-keyframes client_move {
    0% {left: 0%}
    100%{left:-100%}
}