div+css实现华为手机充电动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现华为手机充电动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; display: flex; background: #000; overflow: hidden; } .g-number { position: absolute; width: 300px; top: 27%; text-align: center; font-size: 32px; z-index: 10; color: #fff; } .g-container { position: relative; width: 300px; height: 400px; margin: auto; } .g-contrast { filter: contrast(10) hue-rotate(0); width: 300px; height: 400px; background-color: #000; overflow: hidden; -webkit-animation: hueRotate 10s infinite linear; animation: hueRotate 10s infinite linear; } .g-circle { position: relative; width: 300px; height: 300px; box-sizing: border-box; filter: blur(8px); } .g-circle::after { content: ""; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(0); width: 200px; height: 200px; background-color: #00ff6f; border-radius: 42% 38% 62% 49%/45%; -webkit-animation: rotate 10s infinite linear; animation: rotate 10s infinite linear; } .g-circle::before { content: ""; position: absolute; width: 176px; height: 176px; top: 40%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #000; z-index: 10; } .g-bubbles { position: absolute; left: 50%; bottom: 0; width: 100px; height: 40px; transform: translate(-50%, 0); border-radius: 100px 100px 0 0; background-color: #00ff6f; filter: blur(5px); } li { position: absolute; border-radius: 50%; background: #00ff6f; } li:nth-child(0) { left: 79px; top: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; -webkit-animation: moveToTop 6s ease-in-out -0.051s infinite; animation: moveToTop 6s ease-in-out -0.051s infinite; } li:nth-child(1) { left: 62px; top: 50%; transform: translate(-50%, -50%); width: 21px; height: 21px; -webkit-animation: moveToTop 6s ease-in-out -2.67s infinite; animation: moveToTop 6s ease-in-out -2.67s infinite; } li:nth-child(2) { left: 42px; top: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; -webkit-animation: moveToTop 8s ease-in-out -2.668s infinite; animation: moveToTop 8s ease-in-out -2.668s infinite; } li:nth-child(3) { left: 32px; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; -webkit-animation: moveToTop 5s ease-in-out -4.257s infinite; animation: moveToTop 5s ease-in-out -4.257s infinite; } li:nth-child(4) { left: 25px; top: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; -webkit-animation: moveToTop 5s ease-in-out -0.166s infinite; animation: moveToTop 5s ease-in-out -0.166s infinite; } li:nth-child(5) { left: 73px; top: 50%; transform: translate(-50%, -50%); width: 23px; height: 23px; -webkit-animation: moveToTop 4s ease-in-out -3.266s infinite; animation: moveToTop 4s ease-in-out -3.266s infinite; } li:nth-child(6) { left: 31px; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; -webkit-animation: moveToTop 4s ease-in-out -3.635s infinite; animation: moveToTop 4s ease-in-out -3.635s infinite; } li:nth-child(7) { left: 34px; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; -webkit-animation: moveToTop 4s ease-in-out -4.072s infinite; animation: moveToTop 4s ease-in-out -4.0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0