微信小程序消息跑马灯通知效果

wxml

 <view class="topInfos">
        <image class="scoreIcon" mode="widthFix" src="../../imgs/v2/iconScore.png"></image>
        <image class="hornIcon" mode="widthFix" src="../../imgs/v2/iconHorn.png"></image>
        <view class="marquee">
            <text>2020年，一定要加油哦，活出自己的样子！！！</text>
        </view>
    </view>

wxss

.topInfos {
  position: relative;
  height: 150rpx;
  width: 100%;
}

.topInfos .scoreIcon {
  position: absolute;
  top: 10rpx;
  left: 20rpx;
  width: 180rpx;
  height: 136rpx;
}

.hornIcon {
  position: absolute;
  top: 27rpx;
  left: 203rpx;
  width: 44rpx;
  height: 38rpx;
}

.marquee {
  width: 473rpx;
  position: absolute;
  height: 36rpx;
  line-height: 36rpx;
  top: 29rpx;
  right: 24rpx;
  color: #246d9c;
  font-size: 24rpx;
  overflow: hidden;
  white-space: nowrap;
}

.marquee text {
  display: inline-block;
  animation: move 15s linear infinite;
}

@-webkit-keyframes move {
  from {
      margin-left: 100%;
  }

  to {
      margin-left: -150%;
  }
}

@keyframes move {
  from {
      margin-left: 100%;
  }

  to {
      margin-left: -150%;
  }
}

效果如下：

素材