推荐一款手机充电动画（手机充电动画app）

手机现在基本是我们生活中不可或缺的一部分，而功能机的用户体验也越来越成为我们选择手机的重要标准。也许我们经常会看到一些不同风格的充电动画，今天就带大家真实走进用代码来实现的超炫酷充电动画。

话不多说，先上效果图。

HTML源码

首先需要创建一个大容器energyContainer，来固定我们的画面。然后创建能量生成泡沫energyBubbles，以及接收能量的框框。最后，加上充电进度energyNumber。框架搭建好，剩下的就是实现方法和样式了。

<div class="energyContainer">
    <div class="energyNumber"><span>59.7</span>%</div>
    <div class="energyBox">
      <!-- 接收能量 -->
        <div class="energyCircle"></div>
        <!-- 生成能量 -->
        <ul class="energyBubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

js源码

创建泡沫生成器，通过改变它的样式来营造一种充电的效果。然后设定充电进度，当充电百分之百时，充电完成，进度条停止。

//泡沫生成器&接收器
for (var i = 0; i < $("li").length; i++) {
    var W = (15 + Math.random() * 15) + "px"
    $("li").eq(i).css({
        left: (15 + Math.random() * 70) + "px",
        top: "50%",
        transform: " translate(-50%, -50%)",
        width: W,
        height: W,
        animation: 'moveToTop ' + (Math.random() * 6 + 3) + 's ease-in-out -' + (Math.random() * 5000 / 1000) + 's infinite'
    })
}

//电量进度条
var rangNum ="";
function rangTiem(){
   rangNum = $(".energyNumber").find("span").text();
   rangNum = parseFloat(rangNum)+0.1;//转换数字
   rangNum = rangNum.toFixed(1)//保留一位小数
   if(rangNum <= 100){
    $(".energyNumber").find("span").text(rangNum)
  }else{
    $(".energyNumber").find("span").text("100");
    return;
  }
   setTimeout(function(){
     rangTiem()
   },150);
}
rangTiem()

部分css样式源码

.energyBox {
    filter:contrast(15) hue-rotate(0);
    width:300px;
    height:400px;
    background-color:#000;
    overflow:hidden;
    animation:hueRotate 10s infinite linear;
}
.energyCircle::after {
    content:"";
    position:absolute;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%) rotate(0);
    width:200px;
    height:200px;
    background-color:#00ff6f;
    border-radius:42% 38% 62% 49% / 45%;
    animation:rotate 10s infinite linear;
}
.energyCircle::before {
    content:"";
    position:absolute;
    width:176px;
    height:176px;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background-color:#000;
    z-index:10;
}
@keyframes rotate {
    50% {
    border-radius:45% / 42% 38% 58% 49%;
}
100% {
    transform:translate(-50%,-50%) rotate(720deg);
}
}@keyframes moveToTop {
    90% {
    opacity:1;
}
100% {
    opacity:.1;
    transform:translate(-50%,-180px);
}
}@keyframes hueRotate {
    100% {
        filter:contrast(15) hue-rotate(360deg);
    }
}

就这样一个超炫酷的充电效果生成了，看似简单又很难，看似困难又简单。