CSS3动画实现左右滚动效果

最新推荐文章于 2024-05-11 11:24:23 发布

lamCCH

最新推荐文章于 2024-05-11 11:24:23 发布

阅读量4.8k

点赞数 2

分类专栏： css css3动画文章标签： css3 动画 javascript

本文链接：https://blog.csdn.net/chenlim87/article/details/120351834

版权

css 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

css3动画

1 篇文章 0 订阅

订阅专栏

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。

效果如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css3动画</title>
    <link rel="stylesheet" href="../../images/icon/iconfont/iconfont.css" />
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 5px;
        box-sizing: border-box;
      }
      .animation {
        padding: 5px 0;
        display: inline-block;
        text-align: center;
        background: bisque;
        overflow: hidden; /* 移动过程中隐藏超出容器的部分 */
      }
      /* 定义动画 */
      @keyframes Animation {
        0% {
          /* 动画开始
             具体值：从距离动画元素顶端的xx位置处开始执行动画。比如200px，它会从距离动画元素顶端200px的位置开始执行动画。
             百分比：根据动画元素的宽度进行比例换算。
             0%：从动画元素顶端开始执行动画，100%：从动画元素尾部开始执行动画，200%：从距离动画元素宽度2倍的位置开始执行动画。
          */
          transform: translateX(100%);
          /* transform: translateX(200px); */
        }
        100% {
          /* 动画完成
             负数表示向左移动的距离
             动画元素向左移动它自身的宽度后，动画结束
          */
          transform: translateX(-100%);
        }
      }

      .text {
        /* 要设置成行内元素动画才起效 */
        display: inline-block;
        color: brown;
        width: auto;
        /* 动画名称 时间 匀速 无限循环 */
        animation: Animation 10s linear infinite;
      }
    </style>
  </head>

  <body>
    <div class="animation">
      <span class="text">今天有雨，不要忘了收衣服！</span>
    </div>
  </body>
</html>

lamCCH

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画实现左右滚动效果

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。效果如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi.
复制链接

扫一扫