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);
}
}
来源:
如果这篇文章对你有用,可以关注本人微信公众号获取更多ヽ(^ω^)ノ ~

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析