css3 圆形水波纹特效

程序媛之博客

于 2024-08-01 15:42:30 发布

阅读量242

点赞数 3

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_42080594/article/details/140849637

版权

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

效果图：

实现代码：

.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);
		}
	}