1.實現(xiàn)效果
charge.gif
2.實現(xiàn)原理
div+偽元素實現(xiàn)外邊框樣式
漸變+偽元素實現(xiàn)內(nèi)部波浪
動畫悼做，實現(xiàn)在一定時間內(nèi)右莱，內(nèi)部波浪高度的0到100%
3.實現(xiàn)代碼
<div class="box">
<div class="charge">
<div class="wave"></div>
</div>
</div>
.box {
margin: 20px auto;
width: 685px;
height: 250px;
background: #ccd8d7;
border-radius: 10px;
box-shadow: 0px 0px 30px 1px #eff3eb inset;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.charge {
position: relative;
width: 100px;
height: 200px;
margin: 10px auto;
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-shadow: 0px 0px 10px #fff;
}
.charge::after {
content: '';
position: absolute;
top: -15px;
left: 30px;
width: 40px;
height: 15px;
border-top-left-radius: 10px;
border-top-right-radius: 10prx;
background-color: #fff;
}
.wave {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(#c6f3bd, #79965c, #7b8d82);
overflow: hidden;
animation: more 10s linear infinite;
}
@keyframes more {
0% {
height: 0%;
}
100% {
height: 100%;
}
}
.wave::before {
position: absolute;
content: '';
top: -185px;
left: -50px;
width: 200px;
height: 200px;
border-radius: 45%;
background-color: #fff;
animation: move 10s linear infinite;
}
.wave::after {
position: absolute;
content: '';
top: -180px;
left: -50px;
width: 200px;
height: 200px;
border-radius: 45%;
background-color: #fff;
opacity: .5;
animation: move 8s linear infinite;
}
@keyframes move {
100% {
transform: rotate(360deg);
}
}
