用mask-image做弹幕阴影、歌词滚动阴影、加载进度

• 弹幕阴影,歌词滚动阴影
• 加载进度(待完成)

做弹幕阴影，歌词滚动阴影

效果如下

直接看代码

   <div class="barrage" ref="barrage">
      <div class="barrage_wrap">
        <div class="bar_block" v-for="(item, index) in barrageList" :key="index">
          <div class="barragediv">
            <span :class="'stage stage_tag_' + item.user.stageStatus">{{ item.user.stage }}</span>
            <span :class="'level level_' + item.user.level">{{ item.user.level }}</span>
            <span class="barrage_name">{{ item.user.nickName }}</span>
            <span class="content">{{ item.content.text }}</span>
          </div>
        </div>
      </div>
    </div>

CSS 歌词 歌词开始和消失处两边都加蒙层

  .barrage {
    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.6) 15%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0.6) 85%, rgba(255, 255, 255, 0) 100%);
  }

CSS 弹幕 只在消失处加蒙层

   -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.6) 5%, rgba(255, 255, 255, 1) 10%);
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.6) 5%, rgba(255, 255, 255, 1) 10%);