vue 使用 CSS3 @keyframes 注意要点～

时间：2021-03-17 14:41:49 阅读：100 评论：0 收藏：0 [点我收藏+]

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

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

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

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

原文：https://www.cnblogs.com/wangsaii/p/14548550.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

vue 使用 CSS3 @keyframes 注意要点～