CSS特效
水波球
HTML
<div class="container">
<div class="wave"></div>
</div>
CSS3代码
/*容器显示外层圆框和居中*/
.container {
position: absolute;
width: 150px;
height: 150px;
padding: 5px;
/*外层圆框及颜色*/
border: 5px solid rgb(118, 218, 255);
/*居中核心代码*/
/*先让container左上角和父容器中心对齐*/
top: 50%;
left: 50%;
/*在向左和向上平移container宽和高的一半*/
transform: translate(-50%, -50%);
/*这会让container变成一个圆形*/
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 150px;
height: 150px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
box-shadow: inset 0 0 30px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);
/*水波通用代码*/
&::before,
&::after{
content: "";
position: absolute;
/*大小一定要是显示部分的二倍*/
width: 300px;
height: 300px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
/*圆角45度市水波的关键*/
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotatekeyframe 6s linear infinite;
z-index: 10;
}
/*为了做两层水波*/
&::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotatekeyframe 10s linear -5s infinite;
z-index: 20;
}
}
/*&::before和&::after的旋转效果*/
@keyframes rotatekeyframe {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
来源:
如果这篇文章对你有用,可以关注本人微信公众号获取更多ヽ(^ω^)ノ ~
![微信公众号二维码](https://images.cnblogs.com/cnblogs_com/aeolian/1679458/o_wechat_gzh_qrcode.jpg)