css实现水波纹球及放大缩小的动态效果

2021-01-19 15:02:06 阅读：285 来源： 互联网

标签：水波纹球及 12px wave 动态效果 rgba 253 0px 84

在这里插入图片描述

代码如下

        <div class="bruce flex-ct-x">
          <div class="ball"  :class="[ this.statusFlag? 'ball-warning': '']">
            <div class="title">
              <span class="num">{{ total }}</span
              ><br /><span>未处理事件</span>
            </div>
            <div class="ball-wave">
              <div class="wave-inner"></div>
            </div>
          </div>
        </div>
        <style>

.title {
  position: absolute;
  top: 35%;
  left: 20%;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  z-index: 99;
  text-align: center;
  .num {
    font-size: 22px;
    color: rgba(255, 255, 255, 1);
  }
}
//主要是下边的

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(1);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}
@keyframes move-bigger {
    0% {
    box-shadow: 0px 0px 12px 2px rgba(253, 84, 84, 0.85);
  }
  50% {
    box-shadow: 0px 0px 12px 4px rgba(253, 84, 84, 0.85);
  }
  100% {
    box-shadow: 0px 0px 12px 8px rgba(253, 84, 84, 0.85);
  }
}
.ball {
  overflow: hidden;
  position: relative;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 12px 4px rgba(2, 102, 252, 0.4);
  background: radial-gradient(
    #e6e6e6,
    rgba(96, 158, 252, 1),
    rgba(2, 102, 252, 1)
  );
  .ball-wave {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    overflow: hidden;

    .wave-inner {
      position: absolute;
      left: 0;
      top: 40%;
      width: 600px;
      height: 164px;
      background: url("../../assets/image/wave.png");/*长方形的波浪图片*/
      background-repeat: repeat no-repeat;
      transform-origin: center bottom;
      animation: move_wave 15s linear infinite;
    }
  }
}
.ball-warning {
  // box-shadow: 0px 0px 12px 4px rgba(253, 84, 84, 0.7);
  background: radial-gradient(
    rgba(253, 84, 84, 0.2),
    rgba(253, 84, 84, 0.6),
    rgba(253, 84, 84, 0.9)
  );
   animation: move-bigger 1s infinite;
  .ball-wave {
    .wave-inner {
      background: url("../../assets/image/wave-warning.png");
    }
  }
}
        </style>

参考了以下链接
https://xiaozhuanlan.com/topic/9157246308
http://demo.lanrenzhijia.com/demo/45/4509/demo/

标签：水波纹,球及,12px,wave,动态效果,rgba,253,0px,84
来源： https://blog.csdn.net/qq_32332433/article/details/112831512

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css实现水波纹球及放大缩小的动态效果