vue列表自动滚动，上下两边颜色越来越浅,css实现

效果图

实现方式
使用animation动画自动向上滚动
加上跟页面颜色一样的背景渐变色蒙层实现渐变消失效果

代码如下

             <div class="list-block marquee">
                <div class="list">
                  <div v-for="(item, index) in QueryCockpit" :key="index" class="dongtai">
                    <span>{{ item.DateTimeDesc }}</span>
                    <span>{{ item.RemarkDesc }}</span>
                  </div>
                </div>
                <div class="div1"></div>
                <div class="div2"></div>
              </div>

数据复制一遍，轮播衔接自然

this.QueryCockpit.JointSituationResults = [
            ...QueryCockpit.JointSituationResults,
            ...QueryCockpit.JointSituationResults
          ]

    .list-block {
          height: calc(100% - 50px);
          overflow: hidden;
          .list {
            // line-height: 60px;
            height: 100%;
            overflow: auto;
            /*IE*/
            -ms-overflow-style: none;
            /*火狐*/
            overflow: -moz-scrollbars-none;
            /*谷歌*/
            &::-webkit-scrollbar {
              display: none;
            }
            .text-left {
              text-align: left;
            }
            .dongtai {
              width: 100%;
              min-height: 34px;
              background: linear-gradient(90deg, #0d3962 0%, rgba(7, 10, 22, 0) 60%);
              position: relative;
              margin-bottom: 7px;
              padding: 5px 10px 5px 30px;
              text-align: left;
              line-height: 25px;
              font-size: 13px;
              &::before {
                content: ' ';
                display: inline-block;
                width: 6px;
                height: 100%;
                background: #18adeb;
                position: absolute;
                left: 0;
                top: 0;
              }
              span {
                display: inline-block;
                vertical-align: middle;
                &:first-child {
                  width: 140px;
                }
                &:last-child {
                  width: calc(100% - 150px);
                }
              }
            }
          }
        }
   @keyframes row {
          0% {
          }
          100% {
            transform: translateY(-50%);
          }
        }
    .marquee {
          position: relative;
          .list {
            /* 调用动画 */
            height: initial;
            overflow: initial;
            animation: row 30s linear infinite;
          }
          .list:hover {
            animation-play-state: paused;
          }
          .div1,
          .div2 {
            position: absolute;
            width: 100%;
            height: 45%;
          }
          .div1 {
            top: 0;
            background: -webkit-linear-gradient(
              top,
              rgba(23, 52, 93, 0) 0%,
              rgba(23, 52, 93, 0.3) 66%,
              rgba(23, 52, 93, 0.7) 99%
            ); /* Safari、Chrome */
            background: linear-gradient(rgba(23, 52, 93, 0.7), rgba(23, 52, 93, 0)); /* 默认渐变位置从上往下 */
          }
          .div2 {
            width: 99%;
            bottom: 0;
            background: -webkit-linear-gradient(
              top,
              rgba(13, 23, 59, 0.7) 0%,
              rgba(13, 23, 59, 0.3) 66%,
              rgba(13, 23, 59, 0) 99%
            ); /* Safari、Chrome */
            background: linear-gradient(rgba(13, 23, 59, 0), rgba(13, 23, 59, 0.7)); /* 默认渐变位置从上往下 */
          }
        }