wxml:

<view  style="--width:{{width}}px;--timer:{{timer}}s;">

    <view class="marquee_text" style="font-size:{{size}}px">{{text}}</view>

</view>

wxss:

[@keyframes](/user/keyframes) move {

  from {   margin-left: 100%;  }

  to {   margin-left: var(--width);   /* var接受传入的变量 */  }

}

.marquee_text{

  display: inline-block;

  margin-left: 100%;

  white-space: nowrap;

  animation: move var(--timer)  infinite linear;

  font-weight: bold;background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2025728819,3580500436&fm=26&gp=0.jpg');background-size: contain; -webkit-background-clip: text;color: transparent;

}

js:

Page({

  data: {

    text: '成都近日新增确诊新冠患者3例，请大家做好防护，外出请戴好口罩！',

    size: 14,//宽度即文字大小

    moveTimes: 8,//刚好文字宽度等于屏幕宽度所需的时间

    width: 0,//文字宽度

    timer: 0 //滚动时间

  },

  onLoad: function () {

    var screenW = wx.getSystemInfoSync().windowWidth;//获取屏幕宽度

    var contentW = this.data.text.length * this.data.size;//获取文本大概宽度

    var timer = (contentW / screenW) * this.data.moveTimes;//动态计算文字滚动时间

    timer = timer < 8 ? 8 : timer; //判断时间是否小于8s

    this.setData({ width: -contentW, timer: timer });

  }

})

小结：wxss里面使用变量，在js中给定数据，wxml中通过内联样式动态绑定自定义属性--width（--width--这样也行，获取就是var(--width--)）的值，wxss中通过var(--width)的方式接收变量的值，剩下的看注释，都备注上了。