css3横向无限公告消息滚动功能

css部分

.container {
display: flex;
/* 父容器需要有明确的高度 /
// height: 150px;
width: 2100rpx;
margin: auto;
overflow: hidden;
position: absolute;
top: 20%;
left: 0;
animation: scroll 8s linear infinite normal;
}
.container > .scroll-list {
display: flex;
flex-wrap: wrap;
width: 1050rpx;
.textname{
display: inline-block;
background-color: rgba(0,0,0,0.4);
color: #fff;
font-size: 26rpx;
padding: 5rpx 20rpx;
border-radius: 50rpx;
margin-left: 20rpx;
margin-bottom: 30rpx;
}
}
@keyframes scroll {
100% {
/ 需要滚动内容的总高度 */
left: -1050rpx;
}
}

• « 上一篇：vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)
• » 下一篇：c++11右值引发的概念