css —— 按钮水波纹扩散动画效果实现

一. 效果

​​​​​​​

 

二. 代码

<div class="feature">
        <div class="feature-box">
            <div class="pulse"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
        </div>
    </div>

<style>
        .feature {
			width: 100%;
            height: 800px;
			display: flex;
			align-items: center;
			justify-content: center;
        }
        .feature-box {
            width: 140px;
            height: 140px;
            margin-top: -30%;
            position: relative;
            z-index: 2;
        }
		.pulse {
            width: 140px;
            height: 140px;
            background: #4892FB;
            border-radius: 50%;
        }
        .pulse1, .pulse2 {
            position: absolute;
            width: 180px;
            height: 180px;
            left: 50%;
            top: -20px;
            margin-left: -90px;
            background: #4892FB;
            border-radius: 50%;
            opacity: 0;
            z-index: -1;
            box-shadow: 1px 1px 15px #3399ff;
        }
        .pulse1 {
            animation: warn1 1.5s linear;
            animation-iteration-count: infinite;
        }
        .pulse2 {
            animation: warn2 1.5s linear;
            animation-iteration-count: infinite;
        }
        @keyframes warn1 {
		0% {
			transform: scale(1);
			opacity: 0.01;
		}

		25% {
			transform: scale(1.2);
			opacity: 0.1;
		}

		50% {
			transform: scale(1.4);
			opacity: 0.07;
		}

		75% {
			transform: scale(1.6);
			opacity: 0.03;
		}

		100% {
			transform: scale(1.8);
			opacity: 0.01;
		}
	}

	@keyframes warn2 {
		0% {
			transform: scale(0.8);
			opacity: 0.01;
		}

		25% {
			transform: scale(0.8);
			opacity: 0.13;
		}

		50% {
			transform: scale(1);
			opacity: 0.1;
		}

		75% {
			transform: scale(1.2);
			opacity: 0.07;
		}

		100% {
			transform: scale(1.4);
			opacity: 0.01;
		}
	}
    </style>