html+css 实现图层水波纹效果

最新推荐文章于 2024-09-09 22:16:15 发布

猿学

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量180

点赞数 3

文章标签： html css 前端

资料多来源于网络，如有侵权，请联系本人予以删除

本文链接：https://blog.csdn.net/weixin_38787928/article/details/141160539

版权

html+css 实现图层水波纹效果，废话不多说，直接上代码

<span class="quote-top">
	<i>水波纹</i>
	<span class="ripple ripple-1"></span>
	<span class="ripple ripple-2"></span>
	<span class="ripple ripple-3"></span>
  </span>

<style>
	span.quote-top {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	span.quote-top i {
		display: inline-block;
		width: 275px;
		height: 275px;
		background-color: #76C1A4;
		color: #ffffff;
		text-align: center;
		font-size: 40px;
		line-height: 275px;
		border-radius: 50%;
		border: 10px solid #ffffff;
	}
	.ripple {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		z-index: -1;
		width: 100%;
		height: 100%;
		background-color: #76C1A4;
		animation-name: ripple;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		border-radius: 50%;
		transition: background 1.5s ease;
	}
	.ripple.ripple-1 {
		animation-delay: 1s;
	}
	.ripple.ripple-2 {
		animation-delay: 2s;
	}
	span.quote-top .ripple {
		background-color: #ffffff;
	}
	body{
		background: rgb(0,0,0,0.6);
	}
	@keyframes ripple {
		0% {
			transform: scale(1);
			opacity: 0;
		}
		30% {
			opacity: 0.30;
		}
		100% {
			transform: scale(1.9);
			opacity: 0;
		}
	}

	@keyframes ripple2 {
		0% {
			transform: scale(1);
			opacity: 0;
		}
		30% {
			opacity: 1;
		}
		100% {
			transform: scale(1.9);
			opacity: 0;
		}
	}
</style>