CSS实战 - 波纹扩散效果_css波纹扩散-CSDN博客

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136094880

本文介绍了如何使用CSS和HTML创建两种视觉效果：涟漪扩散和波动扩散，通过示例代码详细展示了如何在div中定义圆形并运用动画技术实现动态变化。

摘要由CSDN通过智能技术生成

1、实现效果

效果一：涟漪扩散效果

效果二：波动扩散效果

2、实现原理

在 div 里定义圆形，使用 css 的动画，让圆形的大小由小到大进行变化。
① 涟漪扩散：
定义了3个带边框的空圆，让这3个圆形由小到大进行变化，为了体现渐进扩散的效果，使用动画延时，规定每个圆形延时时间

② 波动扩散：
定义了1个带背景色的圆，让这个圆形由小到大进行变化

3、具体代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实战 - 波纹扩散效果</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg">
 
	<style type="text/css">
		body {
			margin: 0;
		}
 
        .container {  
            position: absolute;
            top: 30%;
            left: 30%;
            width: 40%;  
            height: 40%;
        } 
 
        .spliter {
			width: 100%;
			height: 20px;
		}
 
		/************以下为具体实现************/
 
		.wave {
			position: relative;
		    width: 100px;
		    height: 100px;
		    text-align: center;
		    line-height: 100px;
		    font-size: 28px;
		}
 
		.wave .circle {
		    position: absolute;
		    border-radius: 50%;
		    opacity: 0;
		}
 
		/* 波纹效果 */
		.wave.ripple .circle {
		    width: calc(100% - 6px); /* 减去边框的大小 */
    		height: calc(100% - 6px);/* 减去边框的大小 */
		    border: 3px solid #fff;
		}
 
		.wave.ripple .circle:first-child {
			animation: circle-opacity 2s infinite;
		}
 
		.wave.ripple .circle:nth-child(2) {
			animation: circle-opacity 2s infinite;
			animation-delay: .3s;
		}
 
		.wave.ripple .circle:nth-child(3) {
		 	animation: circle-opacity 2s infinite;
			animation-delay: .6s;
		}
 
		.wave.ripple.danger {
		    color: red;
		}
 
		.wave.ripple.danger .circle {
			border-color: red;
		}
 
		.wave.ripple.warning {
		    color: orange;
		}
 
		.wave.ripple.warning .circle {
		    border-color: orange;
		}
 
		/* 波动效果 */
		.wave.solid .circle{
			width: 100%;
    		height: 100%;
		    background: #fff;
		}
 
		.wave.solid .circle:first-child {
			animation: circle-opacity 2s infinite;
		}
 
		.wave.solid.danger {
			color: red;
		}
 
		.wave.solid.danger .circle{
			background: red;
		}
		
		.wave.solid.warning {
			color: orange;
		}
 
		.wave.solid.warning .circle{
			background: orange;
		}
 
		@keyframes circle-opacity{
		    from {
		        opacity: 1;
		        transform: scale(0);
		    }
		    to {
		        opacity: 0;
		        transform: scale(1);
		    }
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="wave ripple danger">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="content">
				<i class="fa fa-bell"></i>
			</div>
		</div>
 
		<div class="spliter"></div>
 
		<div class="wave solid warning">
			<div class="circle"></div>
			<div class="content">
				<i class="fa fa-bell"></i>
			</div>
		</div>
	</div>
</body>
</html>