CSS实现动态声音图标 


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			
		}
		.wrap{
			position: relative;
			width: 100px;
			height: 100px;
			margin:100px auto;
		
			/*transform: rotateZ(45deg);*/			
			/*-webkit-transform: rotateZ(45deg);*/			
		}
		.box{
			position: absolute;
			width: 100px;
			height: 100px;
			background:#ccc;
			left: 0;
			bottom: 0;
			border-top-right-radius: 100px;
			transform: rotateZ(45deg);			
			-webkit-transform: rotateZ(45deg);
			animation:obox linear 1s 5000;			
		}
		@keyframes obox{
			0%{background:#ccc;}
			33%{background:#ccc;}
			66%{background:#fff;}
			100%{background:#ccc;}
		}
		@-webkit-keyframes obox{
			0%{background:#ccc;}
			33%{background:#ccc;}
			66%{background:#fff;}
			100%{background:#ccc;}
		}
		.box1{
			width: 80px;
			height: 80px;
			background-color: white;
			position: absolute;
			left: 0;
			bottom:0px;
			border-top-right-radius: 100px;
		}
		.box2{
			width: 60px;
			height: 60px;
			background:#ccc;
			position: absolute;
			left: 0;
			bottom:0px;
			border-top-right-radius: 100px;
			animation:obox2 linear 1s 5000;	
		}
		
		@keyframes obox2{
			0%{background:#ccc;}
			33%{background:#fff;}
			66%{background:#ccc;}
			100%{background:#ccc;}
		}
		@-webkit-keyframes obox2{
			0%{background:#ccc;}
			33%{background:#ccc;}
			66%{background:#fff;}
			100%{background:#ccc;}
		}
		.box3{
			width: 40px;
			height: 40px;
			background-color: white;
			position: absolute;
			left: 0;
			bottom:0px;
			border-top-right-radius: 100px;
		}
		.box4{
			width: 20px;
			height: 20px;
			background:#ccc;
			position: absolute;
			left: 0;
			bottom: 0px;
			border-top-right-radius: 100px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<div class="box1">
				<div class="box2">
					<div class="box3">
						<div class="box4">
					
				        	</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

　　

posted @ 2019-10-06 14:52  福超  阅读(1176)  评论(0)    收藏  举报