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);
		}
	}
相关推荐
yume_sibai1 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书1 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
嘗_1 小时前
手写自己的小型react
前端·javascript·react.js
嘀咕博客1 小时前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit1 小时前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm
zuo-yiran1 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837751 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10241 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
KoProject1 小时前
发布30款App之后,我总结了这套GLM-4.6全自动化开发流
前端·后端·github
社恐的下水道蟑螂1 小时前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css