css实现文字循环滚动效果

在css中，可以利用animationh和keyframest通过给文字绑定一个循环滚动动画来实现文字循环滚动效果。

实现代码：

html：
 

<div class="box">

    <p class="animate">

        文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容

    </p>

</div>

css：
 

.box {

    width: 100%;

    margin: 0 auto;

    border: 1px solid #ff6700;

    overflow: hidden;

}

 

.animate {

    padding-left: 20px;

    font-size: 12px;

    color: #000;

    display: inline-block;

    white-space: nowrap;

    animation: 5s wordsLoop linear infinite normal;

}

 

@keyframes wordsLoop {

    0% {

        transform: translateX(100%);

        -webkit-transform: translateX(100%);

    }

    100% {

        transform: translateX(-100%);

        -webkit-transform: translateX(-100%);

    }

}

 

@-webkit-keyframes wordsLoop {

    0% {

        transform: translateX(100%);

        -webkit-transform: translateX(100%);

    }

    100% {

        transform: translateX(-100%);

        -webkit-transform: translateX(-100%);

    }

}

 

效果图：

说明：

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

translateX(x)：定义平移转换，只是用 X 轴的值。

（学习视频分享：css视频教程）

以上就是css怎么实现文字循环滚动效果的详细内容，更多请关注php中文网其它相关文章！