css3往左的文字跑马灯

CSS3中，有一个很酷的效果叫做往左的文字跑马灯，在实际开发中经常会用到。本文将向您介绍如何实现这个效果。

.marquee{
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
}
.marquee span{
    display: inline-block;
    animation: marquee 15s linear infinite;
}
@keyframes marquee{
0% {
     transform: translateX(0);
}
100% {
     transform: translateX(-100%);
}
}
    

在上面的代码中，我们使用了关键字@keyframes，这个关键字定义了动画的过程。我们利用强大的CSS3特性中的动画属性animation，使文本从左到右滚动。还用了transform属性，它指定在2D或3D平面内平移，旋转或缩放元素。

div class="marquee">
    span>
    CSS3往左的文字跑马灯/span>
    /div>
    

最后，我们给外部容器用类名marquee，文本用标签包起来，这个标签的动画属性将实现文本的滚动。

这就是如何使用CSS3实现往左的文字跑马灯的简单过程，希望对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！