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)); /* 默认渐变位置从上往下 */
          }
        }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值