css实现跑马灯

最新推荐文章于 2024-08-10 15:24:27 发布

csl2013

最新推荐文章于 2024-08-10 15:24:27 发布

阅读量5.4k

点赞数 4

分类专栏：前端文章标签： css 跑马灯动画

本文链接：https://blog.csdn.net/qq_17351067/article/details/64122089

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习参考链接如下：

CSS3 @keyframes 规则

CSS3 动画

栗子

代码

<%--html--%>
<p class="goods-description">
    <span>这是一质量非常好的金斯顿U盘，而且价格十分公道，过期不候呀！！！</span>
</p>

/*CSS*/
/* Safari 和 Chrome */
@-webkit-keyframes marquee {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}

/* Firefox */
@-moz-keyframes marquee {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}

@-ms-keyframes marquee {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}

/* Opera */
@-o-keyframes marquee {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}

@keyframes marquee {
    from {
        left: 0
    }
    to {
        left: -100%
    }
}

.goods-description {
    overflow: hidden;
    position: relative;
}

.goods-description span {
    position: absolute;
    -webkit-animation: marquee 10s linear infinite;
    -moz-animation: marquee 10s linear infinite;
    -ms-animation: marquee 10s linear infinite;
    -o-animation: marquee 10s linear infinite;
    animation: marquee 10s linear infinite;
}

css中的@keyframes和@-webkit-keyframes等声明了动画，动画为from左侧0起to左侧-100%处停止。

之所以声明多个是为了浏览器兼容，资料中显示没有任何浏览器支持@keyframes，但是亲测chrome就支持这个。

css中的.goods-description span为标签绑定了动画，分别声明了动画的name为marquee，时间为10秒，轨迹为线性，播放次数为infinite

注意：如果p标签没有被撑开，加个高度就可以了。