js+css实现电池充电充满动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现电池充电充满动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css"> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.1/css/all.css'> <style> @import url("https://fonts.googleapis.com/css?family=Nunito"); :root { --background-color: rgb(50, 50, 50); --acid-height: 0; --display-charging: "none"; } html, body { margin: 0; width: 100%; height: 100%; display: flex; font-family: "Nunito", sans-serif; background-color: var(--background-color); transition: background-color 0.5s ease-out; } .cell { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .percentage { font-size: 100%; font-weight: bold; color: white; margin-top: 15px; } .percentage i { margin-right: 6px; display: var(--display-charging); } .info { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; margin: 5px; font-size: 80%; color: rgba(255, 255, 255, 0.5); transition: 0.2s ease-in-out; } .info:hover { color: white; } .info i { margin-right: 5px; } .info a { color: inherit; } .battery { position: relative; width: 130px; height: 250px; border: 4px solid #FFF; border-radius: 25px; } .battery:after { position: absolute; top: -18px; left: 45px; width: 40px; height: 10px; background-color: #FFF; border-radius: 5px 5px 0px 0px; content: ""; } .acid-container { overflow: hidden; height: calc(100% - 8px); border-radius: 18px; margin: 4px; } .acid-container .acid { height: 250px; display: flex; flex-direction: column; flex-flow: column-reverse; } .acid-container .acid .fill { background: white; height: var(--acid-height); width: 100%; flex-shrink: 0; transition: height 2s ease-in-out; } .acid-container .acid .waves { display: block; width: 100%; height: 10px; margin-bottom: -1px; } .acid-container .acid .waves .parallax > use { -webkit-animation: move-forever 12s linear infinite; animation: move-forever 12s linear infinite; } .acid-container .acid .waves .parallax > use:nth-child(1) { -webkit-animation-delay: -2s; animation-delay: -2s; fill: rgba(255, 255, 255, 0.6); } .acid-container .acid .waves .parallax > use:nth-child(2) { -webkit-animation-delay: -2s; animation-delay: -2s; -webkit-animation-duration: 5s; animation-duration: 5s; fill: rgba(255, 255, 255, 0.8); } .acid-container .acid .waves .parallax > use:nth-child(3) { -webkit-animation-delay: -4s; animation-delay: -4s; -webkit-animation-duration: 3s; animation-duration: 3s; fill: white; } @-webkit-keyframes move-forever { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } } @keyframes move-forever { 0% { transform: translate(-90px, 0%); } 100% { transform: translate(85px, 0%); } } </style> </head> <body> <!-- partial:index.partial.html --> <div class="cell"> <div id="battery" class="battery"> <div .........完整代码请登录后点击上方下载按钮下载查看
网友评论0