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>
相关推荐
灵感__idea7 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡8 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo8 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel8 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld8 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel8 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi9 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_4569042710 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki10 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo10 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端