css3 圆形水波纹特效

需求描述:需要制作一个动画,特效从圆心开始往外扩散,然后又往回收。

效果图:

实现代码:

<div class="circle"></div>

复制代码
.circle {
		width: 100rpx;
		height: 100rpx;
		background-color: #FF4C4C;
		border-radius: 50%; /* 圆形 */
		box-shadow: 
			inset 0 0 0 10rpx rgba(255, 255, 255, 0.5), /* 内阴影,初始半透明圆 */
			inset 0 0 0 20rpx rgba(255, 255, 255, 0.3), /* 内阴影,稍微大一点 */
			inset 0 0 0 30rpx rgba(255, 255, 255, 0.2); /* 内阴影,最大 */
		animation: expand 5s infinite alternate linear; /* 动画:无限循环并且来回切换 */
	}
	@keyframes expand {
		from {
			box-shadow: 
				inset 0 0 0 10rpx rgba(255, 255, 255, 0.5),
				inset 0 0 0 20rpx rgba(255, 255, 255, 0.3),
				inset 0 0 0 30rpx rgba(255, 255, 255, 0.2);
		}
		to {
			box-shadow: 
				inset 0 0 0 50rpx rgba(255, 255, 255, 0.5),
				inset 0 0 0 80rpx rgba(255, 255, 255, 0.3),
				inset 0 0 0 110rpx rgba(255, 255, 255, 0.2);
		}
	}
相关推荐
DoraBigHead35 分钟前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
ะัี潪ิื1 小时前
精灵图(雪碧图)的生成和使用
java·css
彩旗工作室1 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia2 小时前
02--CSS基础
前端·css
kyle~2 小时前
Qt---setAttribute设置控件或窗口的内部属性
服务器·前端·c++·qt
FIN66682 小时前
昂瑞微:射频与模拟芯片领域的国产领军者
前端·人工智能·科技·前端框架·智能
苦夏木禾2 小时前
css实现表格中最后一列固定
前端·javascript·css
LuHang2 小时前
WebSocket服务封装实践:从连接管理到业务功能集成
前端·websocket
九十一2 小时前
vue2中$set的原理
前端