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);
		}
	}
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试