div+css实现手机电池充电动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现手机电池充电动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** * battery * a stepped battery indicator * @author jh3y */ .battery { height: 150px; width: 100px; background: transparent; border-radius: 2px; border: 5px solid var(--primary); position: relative; } .battery:before { content: ""; height: 30px; width: 50px; background: var(--primary); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 0); border-radius: 2px; } .battery:after { -webkit-animation: battery-charge 1s infinite steps(6); animation: battery-charge 1s infinite steps(6); background: linear-gradient(0deg, transparent, transparent 5%, var(--primary) 5%, var(--primary) 19%, transparent 19%, transparent 24%, var(--primary) 24%, var(--primary) 38%, transparent 38%, transparent 43%, var(--primary) 43%, var(--primary) 57%, transparent 57%, transparent 62%, var(--primary) 62%, var(--primary) 76%, transparent 76%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0