左右移动的公告栏

左右移动的公告栏

主要的样式:
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;
}