纯css模拟手机充电动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> * { box-sizing: border-box; } body { overflow: hidden; display: flex; height: 100vh; margin: 0; padding: 0; background-color: black; } .reset { opacity: 0; position: absolute; bottom: 30px; right: 30px; animation: reset 13s forwards; background: black; border: 0 none; } .reset input { background: black; color: white; border: 0 none; } .phone { --width: 320px; --height: 490px; margin: auto auto 0 auto; width: var(--width); height: var(--height); position: relative; } .text { font-family: sans-serif; color: darkgray; position: absolute; z-index: 2; left: 0; right: 0; text-align: center; top: 180px; font-size: 17px; } .status { width: 190px; justify-content: center; display: flex; align-items: center; color: white; position: absolute; top: 125px; left: 0; right: 0; margin: auto; z-index: 3; } .progress { font-size: 3em; font-family: sans-serif; margin-left: 8px; display: flex; color: transparent; } .progress > small { font-size: 18px; margin-left: 5px; color: white; } .progress::before { content: '99'; color: white; animation: count 12s forwards; } .charging { background-color: white; width: 11px; height: 11px; transform: skew(0deg, -45deg) rotate(47deg) scale(0.7); } .charging::before { content: ''; position: absolute; border-width: 7px 5px 15px 7px; border-style: solid; top: -18px; border-color: transparent transparent white transparent; transform: rotate(5deg) skew(-10deg, -5deg); left: -8px; } .charging::after { content: ''; position: absolute; border-width: 7px 5px 15px 7px; border-style: solid; bottom: -18px; border-color: transparent transparent white transparent; transform: rotate(-175deg) skew(-10deg, -5deg); left: 6px; } .contrast { width: 100%; height: 100%; background-color: black; filter: contrast(20); } .blackhole { width: 210px; height: 210px; filter: blur(10px); margin: auto; background-color: black; border-radius: 50%; position: absolute; left: 0; right: 0; top: 60px; } .blackhole::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: lime; border-radius: 45% 55% 43% 57% / 41% 39% 61% 59%; box-shadow: -3px -1px 0 15px lime, 0px 3px 0 18px lime; transform: rotate(426deg); animation: rotate 20s linear infinite, radius 20s linear infinite; } .blackhole::after { content: ''; position: absolute; background: black; width: 100%; height: 100%; border-radius: 50%; } .lithium { position: absolute; z-index: -1; bottom: -19px; left: 0; right: 0; margin: auto; background-color: lime; width: 70px; height: 50px; border-radius: 45% 55% 48% 52% / 56% 43% 57% 44%; filter: blur(10px); animation: radius 8s linear infinite; transform: rotate(-1deg); } .lithium::after { content: ''; border-radius: 45% 55% 48% 52% / 56% 43% 57% 44%; position: absolute; background-color: lime; width: 70px; height: 50px; bottom: -8px; left: -25px; animation: radius 7s linear infinite; animation-delay: 2s; } .lithium::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: 0; animation: lithium 7s forwards infinite, radius 20s linear infinite; } .lithium i:nth-child(1)::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: 10px; animation: lithium 4s forwards infinite, radius 10s linear infinite; } .lithium i:nth-child(1)::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: 30px; transform: scale(0.8); animation: lithium 5s forwards infinite, radius 10s linear infinite; animation-delay: 1s; } .lithium i:nth-child(2)::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: 20px; animation: lithium 6s forwards infinite, radius 10s linear infinite; animation-delay: 2s; } .lithium i:nth-child(2)::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: -20px; transform: scale(0.9); animation: lithium2 7s forwards infinite, radius 10s linear infinite; animation-delay: 3s; } .lithium i:nth-child(3)::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: 35px; animation: lithium3 3s forwards infinite, radius 10s linear infinite; animation-delay: 4s; } .lithium i:nth-child(3)::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: -20px; transform: scale(1.1); animation: lithium3 5s forwards infinite, radius 6s linear infinite; animation-delay: 5s; } .lithium i:nth-child(4)::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: 45px; animation: lithium4 9s forwards infinite, radius 10s linear infinite; animation-delay: 5s; } .lithium i:nth-child(4)::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(10px); bottom: 0; left: -20px; transform: scale(1.1); animation: lithium4 9s forwards infinite, radius 6s linear infinite; animation-delay: 6s; } @keyframes lithium { 0% { box-shadow: 20px -3vh 0 10px lime; } 100% { border-radius: 45% 55% 48% 52% / 56% 43% 57% 44%; box-shadow: 40px -43vh 0 20px lime; transform: scale(1); } } @keyframes lithium2 { 0% { box-shadow: 10px -5vh 0 10px lime; } 100% { box-shadow: 20px -45vh 0 20px lime; } } @keyframes lithium3 { 0% { box-shadow: 9px -7vh 0 6px lime; } 100% { box-shadow: 14px -45vh 0 15px lime; } } @keyframes lithium4 { 0% { box-shadow: 9px -7vh 0 7px lime; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0