超级炫酷的手机充电特效

最新推荐文章于 2024-07-02 13:50:27 发布

文情战

最新推荐文章于 2024-07-02 13:50:27 发布

阅读量5.7k

点赞数

分类专栏：前端学习文章标签： html html5 css3

本文链接：https://blog.csdn.net/juxueliang1314/article/details/107436566

版权

本文介绍如何利用HTML5和CSS3来实现一款超级炫酷的手机充电动画效果，通过提供的HTML和CSS代码示例，展示了一个逼真的充电过程。

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

超级炫酷的手机充电特效

效果如下：
在这里插入图片描述 html
HTML代码如下：

<div class="box">
		<div class="number">95.2%</div>
		<div class="contrast">
	       <span class="bubble"></span>
		    <span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
		    <span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
			<div class="bubble-home"></div>
		  <div class="circle"></div>
		  </div>
	</div>

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:9%;
    left:50%;
	margin-left: -100px;
	z-index: 9;
	font-size: 30px;
}
.contrast {
   
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    filter: contrast(15);
    animation: hueRotate 5s linear infinite;