vue 使用 CSS3 @keyframes 注意要点～

2021-10-21 12:32:20

------------恢复内容开始------------

项目中用到了在一个框里面文案在里面横向滚动

想了好多方法之后突然看到

transform: translate(110%, 0px);

这个属性让元素偏移突然有了思路

可以使用css3自带的 @keyframes 因为我们在vue框架中使用的这些属性所以我们就不用考虑浏览器适配问题了

  @keyframes move
  {
    0% {
      transform: translate(110%, 0px);
    }

    100% {
      transform: translate(-200%, 0px);
    }
  }

然后在元素的属性中增加一个属性即可代码如下

  .notice-tips {
    animation: move 15s infinite;
    animation-iteration-count:10;
  }

具体animation的属性可以查看

https://www.w3school.com.cn/cssref/pr_animation.asp

码农公寓