简单的CSS圆形缩放动画

最新推荐文章于 2021-09-09 17:13:28 发布

转载最新推荐文章于 2021-09-09 17:13:28 发布 · 510 阅读

本文介绍了一种使用CSS实现的简单圆形缩放动画效果。通过:hover伪类在鼠标悬停时触发圆形元素的缩放动画，利用transform属性完成动画过程。代码中详细展示了如何设置圆形的样式以及动画的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的CSS圆形缩放动画

话不多说鼠标移动上去，看效果吧，效果预览

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>css圆形缩放动画</title>
    <style>
      .circular {
        position: relative;
        width: 48px;
        height: 48px;
      }
      .circular i {
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
      }
      .circular i:before {
        content: '';
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #20a839;
      }
      .circular i:after {
        content: '';
        transition: all .3s;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: scale(0);
        background-color: #30cc54;
      }
      .circular:hover i:after {
        transform: scale(1);
      }
    </style>
  </head>
  <body>
    <div class="circular">
      <i></i>
    </div>
  </body>
</html>