左右移动的公告栏
主要的样式:
animation: rotaryBlockFirst 30s linear infinite;
white-space: nowrap;
HTML
<view class="announcement">
<image src="https://XXXXXX/broadcast.gif"></image>
<view class="announcement-title"> 公告</view>
<view class="announcement-text">
<view class="rotaryBlockFirst">公告 公告 公告 公告 公告 公告 公告</view>
</view>
</view>
CSS
.announcement {
font-size: 27rpx;
display: flex;
height: 50rpx;
align-items: center;
margin: 20rpx auto 0;
background-color: #efefef;
border-radius: 80rpx;
width: 700rpx;
padding: 0 30rpx;
box-sizing: border-box;
}
.announcement image {
height: 58%;
width: 4%;
}
.announcement-title {
padding-left: 15rpx;
}
.announcement-text {
height: 50rpx;
line-height: 50rpx;
overflow: hidden;
position: relative;
width: 520rpx;
margin-left: 15rpx;
}
.announcement image {
height: 40rpx;
width: 40rpx;
}
.rotaryBlockFirst {
animation: rotaryBlockFirst 30s linear infinite;
white-space: nowrap;
position: absolute;
}