实现vue的弹幕功能

1.代码如下

.barrage-control {

  text-align: center;

  margin: 10px 0px;

}

2.在component 里面创建 index.vue 代码如下

.barrage-wrapper {

  * {

    margin: 0px;

    padding: 0px;

  }

  z-index: 1;

  position: absolute;

  left: 0px;

  top: 0px;

  width: 100%;

  height: 100%;

  .barrage-item {

    z-index: 99;

    position: absolute;

    // left: 0px;

    // top: 0px;

    // transform: translateX(-100%);

    // padding: 5px 0px;

    user-select: none; // 禁用选择文字

    position: absolute;

    white-space: pre;

    cursor: pointer;

    // pointer-events: none;

    // perspective: 500px;

    display: inline-block;

    will-change: transform;

    font-size: 25px;

    color: rgb(255, 255, 255);

    font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;

    font-weight: bold;

    line-height: 1.125;

    opacity: 1;

    text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px,

      rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;

    &:hover {

      color: red;

      animation-play-state: paused !important;

      z-index: 150;

    }

  }

  .top-item {

    z-index: 100;

  }

  .barrage-main {

    /* border: 2px solid blue; */

    width: 100%;

    height: 100%;

    position: relative;

    overflow: hidden;

    // background: #000;

  }

  .barrage-main-dm {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

  }

}

.self-dm {

  border: 2px solid #87ceeb;

  box-sizing: border-box;

}

@keyframes barrage-run {

  0% {

    // transform: translate3d(500px, 0, 0);

  }

  100% {

    transform: translate3d(-100%, 0, 0);

  }

}

@keyframes barrage-fade {

  0% {

    visibility: visible;

    // opacity: 1;

  }

  100% {

    visibility: hidden;

    // opacity: 0;

  }

}

.ani-pause {

  & div {

    animation-play-state: paused !important;

  }

}

.ani-running {

  & div {

    animation-play-state: running !important;

  }

}