【css】纯css实现文字循环滚动效果
不用js来实现。
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%); } }
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦
![]()