关于animation:htmlcss画呼吸灯

42次阅读

共计 1849 个字符,预计需要花费 5 分钟才能阅读完成。

搞不了视频太难了。。。。

Animations 是 css3 的一个模块,应用 keyframes 定义如何随着工夫的挪动扭转 CSS 的属性值,能够通过指定它们的持续时间,反复次数,如何反复来管制关键帧的行为。Animations 由两局部组成:css 动画的配置,以及一系列的 keyframes(用来形容动画的开始、过程、完结状态)

transform 属性向元素利用从 2D 或 3D 转换。该属性容许咱们对元素进行旋转、缩放、挪动或者歪斜

<!--
 * @Author: [you name]
 * @Date: 2021-08-12 17:00:29
 * @LastEditors: [you name]
 * @LastEditTime: 2021-09-16 22:27:09
 * @Description: 呼吸灯的实现  用 transform 和 animation 实现
-->
<!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>Document</title>
     <style>
          .bg {
               width: 500px;
               height: 500px;
               margin: 50px auto;
               background-color: rgb(217, 255, 2);
               position: relative;

          }

          .bg .small_cirlce {
               width: 300px;
               height: 300px;
               border: 20px solid white;
               /* 程度居中 */
               top: 50%;
               left: 50%;
               margin-top: -150px;
               margin-left: -150px;
               position: absolute;
               /* 变成边框盒子  它的宽高是整个盒子的宽高 */
               /* 因为边框占据了 40px 所以用内容盒子的话会使其不能居中  所以要转换成边框盒子 */
               box-sizing: border-box;
               border-radius: 50%;
      /* 设置动画 自定义动画名称 circle    ease-in-out:动画以低速开始和完结   infinite 示意有限次执行 */

               animation: circle 5s ease-in-out infinite;
          }

          .bg .big_circle {
               width: 400px;
               height: 400px;
               border: 10px solid white;
               /* 设置程度居中 */
               top: 50%;
               left: 50%;
               margin-top: -200px;
               margin-left: -200px;
               position: absolute;
               /* 变成边框盒子  它的宽高是整个盒子的宽高 */
                  /* 因为边框占据了 20px 所以用内容盒子的话会使其不能居中  所以要转换成边框盒子 */
               box-sizing: border-box;
               border-radius: 50%;
                /* 设置动画 自定义动画名称 circle    ease-in-out    动画以低速开始和完结   infinite:有限次执行 */
               animation: circle 5s ease-in-out infinite;
          }

          /* 设置动画 */
          @keyframes circle {
               /* transform 属性向元素利用从 2D 或 3D 转换。该属性容许咱们对元素进行旋转、缩放、挪动或者歪斜 */
               0% {
                    /* 扭转大小  缩放 scale */
                    transform: scale(0.6);
                    border-color: rgb(255, 3, 3);
               }

               25% {
                    /* 扭转大小 */
                    transform: scale(0.7);
                    border-color: rgb(243, 5, 183);
               }

               50% {
                    /* 扭转大小 */
                    transform: scale(0.8);
                    border-color: rgb(5, 101, 245);
               }

              75% {
                    /* 扭转大小 */
                    transform: scale(0.9);
                    border-color: rgb(77, 248, 10);
               }

               100% {
                    /* 扭转大小 */
                    transform: scale(1);
                    border-color: rgb(2, 236, 244);
               }

          }
     </style>
</head>

<body>
     <div class="bg">
          <div class="small_cirlce"></div>

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

</html>

正文完
 0