CSS电池充电特效源代码-今日头条

<!-- 今天我们将使用CSS来实现电池充电动画效果，现在就开始吧！ -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS 电池充电效果 - 田了个田田</title>
	<!-- 开始添加样式 -->
	<style>
		*{
			padding:0;
			marging:0;
			box-sizing: border-box;
		}
		body {
			display: flex;
			align-items: center;
			justify-content: center;
			background:#e7e7e7;
			min-height: 100vh;
		}
		.battery {
			width: 360px;
			height: 180px;
			border: 1px solid #000;
			border-top-right-radius: 11px;
			border-bottom-right-radius: 11px;
			position: relative;
		}
		.battery:before {
			content:"";
			position: absolute;
			width: 10px;
			height: 36px;
			background:#000;
			top: 50%;
			right: -16px;
			transform:translate(-50%,-50%);
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
		}
		/*到此为止，电池的轮廓已经画出来了，接下来需要添加一个充电的动画效果*/
		.wrap {
			height: 100%;
			background:green;
			animation: charging 3s ease infinite;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		@keyframes charging {
			0%{width: 0;}
			100%{width: 100%;}
			
		}
	</style>
</head>
<body>
	<!-- html部分，代码就这么简单！ -->
	<div class="battery">
		<div class="wrap"></div>
	</div>
</body>
</html>

制作该效果需要基本的html和css知识。点击观看该教程的头条视频。

CSS电池充电特效源代码

头条热榜

精彩视频