css3动画特效

最新推荐文章于 2024-04-17 01:37:33 发布

辉娜

最新推荐文章于 2024-04-17 01:37:33 发布

阅读量384

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44211097/article/details/119873659

版权

css动画特效分为三个大类：动画过渡变形

其中过渡是属于轻型的动画，过渡常使用变形的基本操作。

/*动画*/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>动画</title>
  <style>
    /* 设定图像 */
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      border-radius: 50%;
    }

    .move {
      /* 2. 设定动画 */
      /* animation-name: move;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-fill-mode:forwards;   
      animation-iteration-count: 2; 
      animation-direction: alternate-reverse;    */

      /* 动画的书写形式 */
      animation: move 2s 1s linear 2 forwards;
    }

    /* 第一个图像的触动动画 */
    .move:hover {
      animation-play-state: paused;
    }

    /* 第二个图像的动画延迟一秒  */
    .move_delay_1 {
      animation-delay: 1s;
    }

    /* 1. 定义动画帧 */
    @keyframes move {
      from {
        margin-left: 0;
      }

      to {
        margin-left: 800px;
      }
    }
  </style>
</head>

<body>
  <!-- 第一个图像 -->
  <div class="box move"></div>
  <!-- 第二个图像延迟 -->
  <div class="box move move_delay_1"></div>
</body>

</html>

运行结果：

过渡与变形：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: lightcoral;
      cursor: pointer;
      margin: 100px auto;
      /* 过渡与变化的结合 */
      transition: transform, background-color 2s, 2s 0s linear;
    }

    .box:hover {
      background-color: #f4f4f4;
      transform: scale(1.2);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

运行结果：