纯css实现波纹效果

Posted 水星记_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯css实现波纹效果相关的知识,希望对你有一定的参考价值。

前言

现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们来做一个有意思的动画效果,通过 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>

以上是关于纯css实现波纹效果的主要内容,如果未能解决你的问题,请参考以下文章

纯css实现波纹效果

纯css实现波纹效果

前端纯html+css+javascript实现楼层跳跃式的页面布局

基于纯前端CSS3实现倾角瀑布流照片效果显示

CSS3:实现一个循序渐进的下划线和一个Material波纹按钮

如何使用 HTML5 Canvas 制作水波纹效果