脚本宝典收集整理的这篇文章主要介绍了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怎么实现文字循环滚动效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。