CSS实现扩散，水波纹

避坑记录

于 2024-07-24 11:47:23 发布

阅读量130

点赞数 1

分类专栏： React 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44068262/article/details/140658917

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<div className={styles.flicker}>
   <div className={styles.alarmLamp}></div>
   <div className={styles.ripple}></div>
</div>

          .flicker {
            position: absolute;
            top: 0;
            left: 0;
            width: 40%;
            height: 100%;
            text-align: center;
            .alarmLamp {
              width: 100%;
              height: 100%;
              background-image: radial-gradient(circle, red 46%, transparent 10%);
              position: relative;
              display: inline-block;
            }
            .ripple {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              pointer-events: none;
              background-image: radial-gradient(circle,red 45%, #b72626 50%,red 58%,transparent 10%);
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-position: center;
              animation: rippleEffect 2s infinite;
            }
          }