按钮扩散动画效果
发布于 4 年前 作者 na54 342 次浏览 来自 分享

背景

作为一个后端程序员,实在是对css是头疼的不行,最近有个需求针对按钮来个波纹涟漪效果。

直接上代码

		.bowen {
			display: inline-block;
			width: 200rpx;
			height: 200rpx;
			position: relative;
		}
		
		
		.bowen::before {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  content: "";
		  width: 100%;
		  height: 100%;
		  background: inherit;
		  border-radius: inherit;
		  animation: wave 1.5s ease-out infinite;
		}
		
		
		[@keyframes](/user/keyframes) wave {
		  50%, 75% {
		    width: 230rpx;
		    height: 230rpx;
		  }
		
		  80%, 100% {
		    opacity: 0;
		  }
		}
回到顶部