css实现电池充电
1. 画一个电池
点击查看HTML代码
点击查看CSS代码
.charge{
margin: auto;
background: #fff;
width: 150px;
height: 240px;
border-radius: 12px 12px 2px 2px;
position: relative;
&:before{
content: '';
position: absolute;
width: 40px;
height: 10px;
border-radius: 6px 6px 0px 0px;
top: -10px;
left: 50%;
transform: translate(-50%, 0);
background-color: rgba(255, 255, 255, .5);
}
}
2. 实现电量色块
点击查看HTML代码
点击查看CSS代码
.charge{
margin: auto;
background: #fff;
width: 150px;
height: 240px;
border-radius: 12px 12px 2px 2px;
position: relative;
&:before{
content: '';
position: absolute;
width: 40px;
height: 10px;
border-radius: 6px 6px 0px 0px;
top: -10px;
left: 50%;
transform: translate(-50%, 0);
background-color: rgba(255, 255, 255, .5);
}
/* 电量色块 */
&:after{
content: '';
position: absolute;
width: 100%;
height: 20%;
left: 0;
bottom: 0;
background-color: gold;
}
}
3. 实现色块高度动画
/* 电量色块 */
&:after{
...
animation: heightAnimate 4s ease-out infinite ;
}
@keyframes heightAnimate{
100%{
height: 100%;
}
}
4. 实现色彩动画
/* 电量色块 */
&:after{
...
animation: heightAnimate 4s ease-out infinite, colorAnimate 4s ease-out infinite ;
}
@keyframes colorAnimate{
100%{
filter: hue-rotate(120deg);
}
}
5. 实现波浪动画
点击查看HTML代码
点击查看CSS代码
.wave {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
/* top: 50%; */
transform: translate(-50%, 30%);
background-color: rgba(255, 255, 255, .8);
border-radius: 45% 47% 46% 44%;
animation: waveAnimate 10s linear infinite;
z-index: 99;
&:before {
content: '';
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .5);
border-radius: 38% 41% 38% 37%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
DEMO
点击查看HTML代码
点击查看CSS代码
.charge-animate-res-contain {
height: 100%;
position: relative;
background-color: #ccc;
.charge {
width: 150px;
height: 240px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 12px 12px 2px 2px;
transform: translate(-50%, -50%);
background: rgb(222, 43, 43);
animation: colorAnimate 10s linear infinite;
.wave {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
bottom: 90px;
transform: translate(-50%, 30%);
background-color: rgba(255, 255, 255, 1);
border-radius: 45% 47% 46% 44%;
z-index: 9;
animation: waveAnimate 10s linear infinite;
&:before {
content: '';
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .5);
border-radius: 38% 41% 38% 37%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.header{
width: 40px;
height: 10px;
left: 0px;
top: 0px;
border-radius: 6px 6px 0px 0px;
transform: translate(55px, -100%);
background-color: rgba(255,255,255,.6);
overflow: hidden;
}
.battery{
width: 150px;
height: 240px;
border-radius: 12px 12px 2px 2px;
position: absolute;
left: 50%;
top: 0px;
transform: translate(-50%, 0%);
overflow: hidden;
}
}
}
@keyframes waveAnimate {
100% {
transform: translate(-50%, -30%) rotate(360deg);
}
}
@keyframes heightAnimate {
100% {
height: 100%;
}
}
@keyframes colorAnimate {
10% {
filter: hue-rotate(0deg) brightness(100%);
}
11% {
filter: hue-rotate(59deg) brightness(130%);
}
20% {
filter: hue-rotate(59deg) brightness(160%);
}
50% {
filter: hue-rotate(59deg) brightness(200%);
}
51% {
filter: hue-rotate(120deg) brightness(100%);
}
100% {
filter: hue-rotate(120deg) brightness(130%);
}
}
原文链接： https://github.com/chokcoco/iCSS/issues/75