css 波纹效果

原创
2020/11/15 17:14
阅读数 22

 

原文链接: css 波纹效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>

    <style>
      .ripple {
        margin: auto;
        margin-top: 20%;
        background-color: #fff;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        animation: ripple 2s linear infinite 1s;
        animation-delay: 0s;
      }

      /* // 0 ,191, 255 */
      @keyframes ripple {
        0% {
          box-shadow: 0 0 0 0 rgba( 0 ,191, 255, 0.2),
            0 0 0 6px rgba( 0 ,191, 255, 0.2);
        }
        100% {
          box-shadow: 0 0 0 6px rgba( 0 ,191, 255, 0.2),
            0 0 0 8px rgba( 0 ,191, 255, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="ripple"></div>
  </body>
</html>

 

另外一个大一点的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            font-size: 62.5%;
            background-color: #000;
        }

        .ripple {
            margin: auto;
            margin-top: 10rem;
            background-color: #fff;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            animation: ripple 2s linear infinite;
        }

        @keyframes ripple {
            0% {
                box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2),
                0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 5rem rgba(255,255,255, 0.2);
            }
            100% {
                box-shadow: 0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 4rem rgba(255,255,255, 0.2),
                0 0 0 8rem rgba(255,255,255, 0);
            }
            /*0% {*/
            /*    box-shadow: 0 0 0 0rem rgba($ripple-color, 0.2),*/
            /*    0 0 0 1rem rgba($ripple-color, 0.2),*/
            /*    0 0 0 2rem rgba($ripple-color, 0.2),*/
            /*    0 0 0 5rem rgba($ripple-color, 0.2);*/
            /*}*/
            /*100% {*/
            /*    box-shadow: 0 0 0 1rem rgba($ripple-color, 0.2),*/
            /*    0 0 0 2rem rgba($ripple-color, 0.2),*/
            /*    0 0 0 5rem rgba($ripple-color, 0.2),*/
            /*    0 0 0 8rem rgba($ripple-color, 0);*/
            /*}*/
        }
    </style>
</head>
<body>
<div class="ripple" style="animation-delay: 0s"></div>

</body>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部