css Animation 动画-右进左出

transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(移动) ;
html 复制代码
<style>
.jinggao {
      width: 60vw;

      display: inline-block;
      text-align: center;
      overflow: hidden;
      box-sizing: border-box;
    }
    @keyframes Animation {
      0% {
        /* 右边 */
        transform: translateX(40vw);
      }
      100% {
        /* 左边 */
        transform: translateX(-40vw);
      }
    }
    .text {
      display: inline-block;
      color: #3379b7;
      font-size: 18px;

      animation: Animation 12s linear infinite;
    }
    .text:hover {
      animation-play-state: paused;
      cursor: pointer;
    }
</style> 
html 复制代码
<div>
      <div class="jinggao">
        <span class="text">右进左出</span>
      </div>
    </div>
相关推荐
web行路人9 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂31 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石40 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程41 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js