手机充电动画css实现

最新推荐文章于 2024-01-05 13:24:17 发布

superXiaoyun

最新推荐文章于 2024-01-05 13:24:17 发布

阅读量248

点赞数

分类专栏： html 文章标签： css animation js

本文链接：https://blog.csdn.net/superXiaoyun/article/details/119676801

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个HTML5代码实现了一个有趣的手机充电动画，包括旋转的圆形电池、百分比数字显示和上升的气泡效果。动画使用CSS3滤镜、关键帧动画以及JavaScript进行交互更新充电进度，提供了一种吸引用户的视觉体验。

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

<!DOCTYPE html>
<html>
<head>
	<title>手机充电动画</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		.box {
			width: 800px;
			height: 800px;
			background: #000;
			margin: 20px auto;
			padding-top: 20px;
		}

		.number {
			width: 200px;
			height: 200px;
			text-align: center;
			line-height: 200px;
			color: #fff;
			position: absolute;
			top: 90px;
			left: 50%;
			margin-left: -100px;
			z-index: 9;
			font-size: 30px;
		}

		.contrast {
			width: 100%;
			height: 100%;
			background: #000;
			position: relative;
			filter: contrast(15);
			animation: colorChange 5s linear infinite;
		}
		@keyframes colorChange{
			0% {
				filter: contrast(15) hue-rotate(0);
			}
			100% {
				filter: contrast(15) hue-rotate(360deg);
			}
		}
		.circle {
			width: 300px;
			height: 300px;
			position: absolute;
			left: 50%;
			top: 0;
			margin-left: -150px;
			filter: blur(8px);
			animation: rotateCircle 5s linear infinite;
		}
		.circle::before {
			content: '';
			width: 200px;
			height: 200px;
			background: #00ff6f;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 49% 38% 62% 49% / 45%;
		}
		.circle::after {
			content: '';
			width: 176px;
			height: 178px;
			background: #000;
			/*border: 50%;*/
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
		}

		@keyframes rotateCircle {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}

		.bubble-home {
			width: 150px;
			height: 50px;
			background: #00ff6f;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -75px;
			border-radius: 150px 150px 0 0;
			filter: blur(5px);
		}
		.bubble {
			width: 20px;
			height: 20px;
			background: #00ff6f;
			border-radius: 100%;
			position: absolute;
			bottom: 0;
			transform: translate(-50%, 0);
			z-index: 100;
			animation: bubbleMoveUp 3s ease-in-out infinite;
			filter: blur(5px);
		}
		.bubble:nth-child(1) {
			width: 30px;
			height: 30px;
			left: 50%;
			animation-duration: 4s;
			animation-delay: 1.2s;
		}
		.bubble:nth-child(2) {
			width: 20px;
			height: 20px;
			left: 44%;
			animation-duration: 3s;
			animation-delay: 1s;
		}
		.bubble:nth-child(3) {
			width: 24px;
			height: 24px;
			left: 48%;
			animation-duration: 3.2s;
			animation-delay: 1.7s;
		}
		.bubble:nth-child(4) {
			width: 22px;
			height: 22px;
			left: 46%;
			animation-duration: 3.7s;
			animation-delay: 2.2s;
		}
		.bubble:nth-child(5) {
			width: 20px;
			height: 20px;
			left: 56%;
			animation-duration: 4s;
			animation-delay: 3s;
		}
		.bubble:nth-child(6) {
			width: 23px;
			height: 23px;
			left: 50%;
			animation-duration: 3.5s;
			animation-delay: 2.5s;
		}
		.bubble:nth-child(7) {
			width: 20px;
			height: 20px;
			left: 53%;
			animation-duration: 4s;
			animation-delay: 1.6s;
		}
		.bubble:nth-child(8) {
			width: 20px;
			height: 20px;
			left: 56%;
			animation-duration: 2.5s;
			animation-delay: 1.9s;
		}
		.bubble:nth-child(9) {
			width: 23px;
			height: 23px;
			left: 47%;
			animation-duration: 4s;
			animation-delay: 0.5s;
		}
		.bubble:nth-child(10) {
			width: 22px;
			height: 22px;
			left: 51%;
			animation-duration: 3.4s;
			animation-delay: .9s;
		}
		@keyframes bubbleMoveUp {
			0% {
				bottom: 0;
			}
			100% {
				bottom: calc(100% - 260px);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="number">
			<span id="num">0</span>
			<span>%</span>
		</div>
		<div class="contrast">

			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>
			<div class="bubble"></div>

			<div class="bubble-home"></div>
			<div class="circle"></div>
		</div>
	</div>
	<script type="text/javascript">
		let num = document.getElementById('num')
		let interval = setInterval(() => {
			let n = Number(num.innerText)
			if(n >= 100) {
				num.innerText = 100
				alert('充电完成')
				clearInterval(interval)
				return
			}
			num.innerText = (n + 0.1).toFixed(1)
		}, 100)
	</script>
</body>
</html>