评论

按钮扩散动画效果

按钮扩散动画效果

背景

作为一个后端程序员,实在是对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 wave {
		  50%, 75% {
		    width: 230rpx;
		    height: 230rpx;
		  }
		
		  80%, 100% {
		    opacity: 0;
		  }
		}
点赞 1
收藏
评论
登录 后发表内容