关于100vh我想说CSS电池充电特效源代码

！今天我们将使用CSS实现电池充电动画。现在开始！-

！DOCTYPE html

Html lang='en '

头(电影)

meta charset=' utf-8 '

元名称=' viewport ' content=' width=device-width，initial-scale=1.0 '

/titleCSS电池充电效果-字段/标题

！-开始添加样式-

风格(音乐)

* {

Padding:0

Marging:0

框-sizing : border-框；

}

Body {

display : flex:

Align-items:中心；

justify-content : center；

background : # e 7 e 7 e 7；

min-height : 100 VH；

}

.battery {

Width: 360px

海特： 180px

Border: 1px solid # 000

border-top-right-radius 3360 11 px；

border-bottom-right-radius : 11 px；

Position: relative:

}

.battery:before {

内容： ' '；

Position: absolute:

Width: 10px

海特： 36px

Background: # 000

top : 50%；

Right: -16px:

Transform : translate (-50%、-50%)；

border-top-right-radius 3360 5 px；

border-bottom-right-radius 3360 5px；

}

/*到目前为止，电池的轮廓已经勾勒出来，需要添加充电的动画效果。*/

.wrap {

海特： 100%；

Background:green

animation : charging 3s ease infinite；

border-top-right-radius 3360 10px；

border-bottom-right-radius 3360 10px；

}

@keyframes charging {

0% { width 3360 0 0；}

100% { width : 100%；}

}

/style

/head

菩提

！- html部分，代码太简单了！-

Div类=' battery '

Div类=' wrap'/div

/div

/body

/html创建效果需要基本的html和CSS知识。