纯CSS实现文字滚动效果

2018/12/21 14:21:25 | 阅819 来源:好空间网络 [打印] [关闭]
 

.topname{
width:750rpx;
height:70rpx;
background-color: #b5a17c;
text-align: center;
line-height: 65rpx;
}

.animate {
color: #ffffff;
font-size: 35rpx;
padding-left: 40rpx;
display: inline-block;
white-space: nowrap;
animation: 20s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(750rpx);
-webkit-transform: translateX(750rpx);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}


HTML代码:

<view class="topname">
<view class="animate">这里是要滚动的文字可以长一点</view>
</view>


经营许可证ICP:皖B2-20100052 公司邮箱:zcdnsz@jspkongjian.net
Copyright © 2004-2015, 安徽好空间网络科技有限公司 版权所有 , 本站素材部分来源于网络,如有侵权请告知删除。