css实现跑马灯

来源：互联网发布：极乐净土动作数据镜头编辑：程序博客网时间：2024/06/04 18:21

学习参考链接如下：

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标签没有被撑开，加个高度就可以了。

1 0