Android仿荣耀手机充电动画,手机充电动画效果

html,body {

width:100%;

height:100%;

display:flex;

background:#000;

overflow:hidden;

}

.g-number {

position:absolute;

width:300px;

top:27%;

text-align:center;

font-size:32px;

z-index:10;

color:#fff;

}

.g-container {

position:relative;

width:300px;

height:400px;

margin:auto;

}

.g-contrast {

filter:contrast(15) hue-rotate(0);

width:300px;

height:400px;

background-color:#000;

overflow:hidden;

animation:hueRotate 10s infinite linear;

}

.g-circle {

position:relative;

width:300px;

height:300px;

box-sizing:border-box;

filter:blur(8px);

}

.g-circle::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;

}

.g-circle::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;

}

.g-bubbles {

position:absolute;

left:50%;

bottom:0;

width:100px;

height:40px;

transform:translate(-50%,0);

border-radius:100px 100px 0 0;

background-color:#00ff6f;

filter:blur(5px);

}

li {

position:absolute;

border-radius:50%;

background:#00ff6f;

}

@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);

}

}