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);
		}
	}
相关推荐
kymjs张涛18 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵23 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62235 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94942 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
一只毛驴1 小时前
面试:SASS/LESS/SCSS区别
css
chao_7891 小时前
CSS表达式——下篇【selenium】
css·python·selenium·算法
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
土豆12502 小时前
提升CSS开发效率的必备Chrome插件
css·chrome