2022-07-08 css 滚动动画
<div class="box"> <p class="animate">6666666666666666666</p> </div>
.box { width: 100%; margin: 0 auto; overflow: hidden; padding: 16px 0; } .animate { padding-left: 20px; font-size: 12px; color: red; display: inline-block; white-space: nowrap; animation: 15s 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%); } }
注:本文转载于https://m.php.cn/article/483998.html