CSS 动画（圆圈荡漾+波浪图）

CSS动画：圆圈荡漾与波浪图效果

最新推荐文章于 2025-10-18 17:01:29 发布

原创

最新推荐文章于 2025-10-18 17:01:29 发布 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了两种CSS动画效果，包括圆圈荡漾动画，常用于吸引用户点击或勾选；以及波浪图动画，适用于提示用户进行路由跳转或弹出操作。

动画一：圆圈荡漾

用途：常用于提示用户去点击或勾选
在这里插入图片描述

<div style="margin: 30px auto; width: 300px">
      <i class="circleRipple"></i>
      <span style="margin-left: 30px">圈圈荡漾</span>
</div>

/* 圆圈荡漾 circleRipple*/
  .circleRipple{
   
   
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #ddd;
    border-radius: 50%;
    &:after{
   
   
      content: ''; /* 注：before,after伪类必须加 content:'';*/
      position: absolute;
      width: 26px;
      height: 26px;
      left: -7px;
      top: -7px;
      border: 4px solid #0093DD;
      border-radius: 30px