纯css实现波纹效果

Posted 2023-03-02 水星记_

前言

现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，通过 css3 实现波纹效果，下面一起看看吧。

---

实现效果

---

完整源码

<template>
  <div class="parentBox">
    <div class="contantBox">点击进入直播间</div>
  </div>
</template>
<style lang="less" scoped>
.parentBox 
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  @keyframes shineLight 
    0% 
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); /* 添加开始阴影并设置透明度 */
    

    100% 
      box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); /* 添加结束阴影并设置透明度 */
    
  
  .contantBox 
    width: 140px;
    text-align: center;
    padding: 6px 0px;
    color: white;
    border: 1px solid;
    border-radius: 20px;
    animation: shineLight 1.8s infinite;
  

</style>

---

向外扩散式波纹

实现效果

---

完整源码

<template>
  <div class="parentBox">
    <div class="containerBox">
      <div class="dotBox"></div>
      <div class="pulseBox"></div>
      <div class="pulseTwoBox"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.parentBox 
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  @keyframes warn 
    0% 
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0;
    

    25% 
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.1;
    

    50% 
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.3;
    

    75% 
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.5;
    

    100% 
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 0;
    
  

  @keyframes warn1 
    0% 
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0;
    

    25% 
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.1;
    

    50% 
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.3;
    

    75% 
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.5;
    

    100% 
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0;
    
  

  .containerBox 
    position: relative;
    width: 40px;
    height: 40px;
  

  /* 保持大小不变的小圆圈  */
  .dotBox 
    position: absolute;
    width: 92px;
    height: 92px;
    left: 120px;
    top: 120px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 2;
  

  /* 产生动画（向外扩散变大）的圆圈  */
  .pulseBox 
    position: absolute;
    width: 320px;
    height: 320px;
    left: 6px;
    top: 6px;
    border: 6px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn 2s ease-out;
    -moz-animation: warn 2s ease-out;
    animation: warn 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 30px #fff;
  

  .pulseTwoBox 
    position: absolute;
    width: 320px;
    height: 320px;
    left: 6px;
    top: 6px;
    border: 6px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    -webkit-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    box-shadow: 1px 1px 30px #fff;
  

</style>