css怎么实现文字循环滚动效果
css实现文字循环滚动的方法：1、在文字元素上使用animation属性绑定一个循环动画；2、利用“@keyframes”规则和“transform: translateX(值%)”语句设置动画每一帧中文字的平移位置即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
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怎么实现文字循环滚动效果的详细内容！
相关内容
-
css实现领积分动画效果
最近项目中要做一个领积分的效果，根据老板的描述，这个效果类似于支付宝蚂蚁森林里的领取能量。整体效果是就是在树周围飘着几个积分元素，上下滑动，类似星星闪烁，点击领取后，沿着树中心...
-
利用css实现一个抽奖动画效果
首先我们先来看下最终的运行效果：从效果图我们可以看到，抽奖会自动进行，并显示中奖信息。这个效果基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。具体步骤如下：...
-
利用css制作有趣的文字摆动动画特效
在之前的文章《超实用！利用CSS3将两个图片叠加在一起显示》中，我们分享了两种利用CSS3将两个图片叠加融合在一起显示的特效。这次我们给大家介绍一下利用CSS如何制作文字摆动动...
-
一文通过动画来快速学习 css ！
本篇文章带大家深入解析一下如何实现动画效果，通过动画来快速学习css，希望对大家有所帮助！随着业务对前端的需求越来越多，作为前端三大法宝之一的css也越变越复杂。给初学的同学们...
-
看看图片走马灯动态效果利用CSS怎么实现？
图片走马灯动态效果利用CSS怎么实现？下面本篇文章就来给大家介绍一下使用css3animationtransform实现图片走马灯效果的方法，希望对大家有所帮助！由于项目需要实...
-
利用纯CSS实现旋转React图标的动画效果
本篇文章手把手带大家利用纯CSS实现旋转React图标的动画效果，希望对大家有所帮助！几天前，小包在codepen看到一个剑气加载效果，大为惊奇，再次被CSS折服。本来想和大家...
-
css怎么实现图片放大缩小动画
方法：1、使用“@keyframes动画名称{}”规则和“transform:scale(缩放比例);”语句创建放大缩小动画；2、使用“图片元素{animation:动画名称时...
-
深入了解CSS动画新特性：@scroll-timeline
在之前的文章《2022年你值得了解的几个CSS新特性（收藏学习）》中带大家简单介绍了几个CSS新特性，今天带大家深入了解其中的一个新特性（动画杀手锏）：@scroll-time...
-
手把手带你使用CSS绘制一个可爱卡通狮子动画
怎么利用CSS绘制狮子动画？下面本篇文章手把手带大家一步步利用CSS绘制一个可爱卡通狮子动画，希望对大家有所帮助。本期我们要使用纯css来绘制出一个乖巧可爱的卡通狮子，通过这个...
-
CSS+JS如何制作皮卡丘动画（代码分析）
本篇文章给大家介绍一下CSS+JavaScript制作皮卡丘动画的方法，会一步步给大家介绍使用css如何绘制皮卡丘，如何使用js实现动态效果，让皮卡丘动起来。简单记录一下思路，...
