css动画实现一个svg图标镂空充电动画_汽车充电中css svg-CSDN博客

本文链接：https://blog.csdn.net/qq_34415621/article/details/125977623

在这里插入图片描述
效果如图所示
代码比较简单

<!DOCTYPE html>
<html lang="en">
	<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>

			.energy {
				position: relative;
				width: 200px;
				height: 200px;
				background-image: url("./mask.svg"); //与下面的mask不冲突，mask是隐藏的
				-webkit-mask: url("./mask.svg"); //实现效果的关键，使用遮罩制造镂空效果
			}
			.energy::before {
				content: "";
				position: absolute;
				height: 100%;
				width: 100%;
				top: 100px;
				left: 0;
				background-image: linear-gradient(#00f324, #637f67);
				-webkit-animation: moveUp 6s linear infinite;
			}
			
			@-webkit-keyframes moveUp
			{
				from {top:200px;}
				to {top:0;}
			}
			
			.text {
				width: 200px;
				text-align: center;
			}

		</style>
	</head>
	<body>
		<div class="energy"></div>
		<div class="text">
			机器人充电中，请稍后
		</div>
	</body>
</html>

关键部分见代码中的注释

mask.svg文件代码如下

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M640 307.2h-85.333333V234.666667c38.4-17.066667 64-55.466667 64-98.133334 0-59.733333-46.933333-106.666667-106.666667-106.666666S405.333333 81.066667 405.333333 136.533333c0 42.666667 25.6 81.066667 64 98.133334v72.533333H384c-153.6 0-277.333333 123.733333-277.333333 277.333333s123.733333 277.333333 277.333333 277.333334h256c153.6 0 277.333333-123.733333 277.333333-277.333334S793.6 307.2 640 307.2z m-128-187.733333c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333-21.333333-8.533333-21.333333-21.333333 8.533333-21.333333 21.333333-21.333333z m128 657.066666H384c-106.666667 0-192-85.333333-192-192s85.333333-192 192-192h256c106.666667 0 192 85.333333 192 192s-85.333333 192-192 192z"  /><path fill="#333333" d="M362.666667 460.8c-72.533333 0-128 55.466667-128 128s55.466667 128 128 128 128-55.466667 128-128-55.466667-128-128-128z m0 170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667 42.666667 17.066667 42.666666 42.666667-17.066667 42.666667-42.666666 42.666667zM661.333333 460.8c-72.533333 0-128 55.466667-128 128s55.466667 128 128 128 128-55.466667 128-128-55.466667-128-128-128z m0 170.666667c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666667zM42.666667 460.8c-25.6 0-42.666667 17.066667-42.666667 42.666667v170.666666c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666666-42.666667v-170.666666c0-25.6-17.066667-42.666667-42.666666-42.666667zM981.333333 460.8c-25.6 0-42.666667 17.066667-42.666666 42.666667v170.666666c0 25.6 17.066667 42.666667 42.666666 42.666667s42.666667-17.066667 42.666667-42.666667v-170.666666c0-25.6-17.066667-42.666667-42.666667-42.666667zM857.6 904.533333H166.4c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h691.2c25.6 0 42.666667-17.066667 42.666667-42.666667s-21.333333-42.666667-42.666667-42.666667z"  /></svg>