CSS实标题现同心圆的缩放

最新推荐文章于 2021-08-04 08:18:37 发布

做一个暴躁的开发

最新推荐文章于 2021-08-04 08:18:37 发布

阅读量573

点赞数 1

文章标签： css3 html

本文链接：https://blog.csdn.net/qq_40549954/article/details/107901029

版权

CSS实标题现同心圆的缩放

最近学习了css动画效果，记录一下同心圆的缩放问题

问题描述

在这里插入图片描述

我先设置了两个div，外圈是class=“one”，内圈是class=“two”, 代码如下：

<body>
  <div class="one"></div>
  <div class="two"></div>
</body>

分别设置他们的div，给他们边框，并且设置成圆形

.one {
      width: 500px;
      height: 500px;
      border: 20px solid lightcoral;
      border-radius: 50%;
      overflow: hidden;
      }
 two {
      width: 300px;
      height: 300px;
      border: 50px solid lightblue;
      float: left;
      position: absolute;
      top: 100px;
      left: 100px;
      }

设置动画

    .one {
      animation-name: ani;
      animation-duration: 4s;
      animation-fill-mode: forwards;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    .two {
      animation-name: ani2;
      animation-duration: 5s;
      animation-fill-mode: forwards;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    @keyframes ani {
      from {
        /* 外圈放大10px */
        transform: scale(1);
      }

      to {
        transform: scale(1.02);
      }
    }

    @keyframes ani2 {
      from {
        /* 内圈缩小12px */
        transform: scale(1);
      }

      to {
        transform: scale(0.917);
      }
    }

在这里要说明一下，放大与缩小用的是原div的倍数。例如外圈是500px*500px，向外扩大10px，就是10/500=0.02。放大就是在1倍的基础上加0.02倍。

完整代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小例子</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    div {
      margin: 50px;
    }

    .one {
      width: 500px;
      height: 500px;
      border: 20px solid lightcoral;
      border-radius: 50%;
      overflow: hidden;
      animation-name: ani;
      animation-duration: 4s;
      animation-fill-mode: forwards;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    .two {
      width: 300px;
      height: 300px;
      border: 50px solid lightblue;
      float: left;
      position: absolute;
      top: 100px;
      left: 100px;
      border-radius: 50%;
      animation-name: ani2;
      animation-duration: 5s;
      animation-fill-mode: forwards;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    @keyframes ani {
      from {
        /* 外圈放大10px */
        transform: scale(1);
      }

      to {
        transform: scale(1.02);
      }
    }

    @keyframes ani2 {
      from {
        /* 内圈缩小12px */
        transform: scale(1);
      }

      to {
        transform: scale(0.917);
      }
    }
  </style>
</head>

<body>
  <div class="one"></div>
  <div class="two"></div>
</body>

</html>

做一个暴躁的开发

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实标题现同心圆的缩放

CSS实标题现同心圆的缩放最近学习了css动画效果，记录一下同心圆的缩放问题问题描述我先设置了两个div，外圈是class=“one”，内圈是class=“two”, 代码如下：<body> <div class="one"></div> <div class="two"></div></body>分别设置他们的div，给他们边框，并且设置成圆形.one { width: 500px;
复制链接

扫一扫