纯CSS实现文字滚动效果!--好空间网络!

正文 /News

纯CSS实现文字滚动效果

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

.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>

最新评论

汇课小程序：
真心说一句有用...晚上其他的代码太多了,臃肿,这个好用
评论时间：2019/7/5 19:47:20

发表评论

您的姓名：	(*)
验证码：	(*) 点击更换
您的评论：

不能超过500个字符

所有留言只代表网友观点，不代表本站观点。

请各位遵纪守法并注意语言文明。