css实现水波纹球及放大缩小的动态效果
作者:互联网
代码如下
<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