svg+js实现wifi信号连接动画i效果代码
代码语言:html
所属分类:动画
代码描述:svg+js实现wifi信号连接动画i效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --primary1: hsl(var(--hue),90%,95%); --primary3: hsl(var(--hue),90%,85%); --primary9: hsl(var(--hue),90%,50%); --primary11: hsl(var(--hue),90%,40%); --primary15: hsl(var(--hue),90%,25%); --primary17: hsl(var(--hue),90%,15%); --primary19: hsl(var(--hue),90%,5%); --trans-dur: 0.3s; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320)); } body, button { font: 1em/1.5 "DM Sans", sans-serif; } body { background-color: var(--primary1); color: var(--primary19); height: 100vh; display: grid; place-items: center; transition: background-color var(--trans-dur), color var(--trans-dur); } main { padding: 3em 0; text-align: center; } .wifi { display: block; margin: 0 auto 3em auto; width: 10em; height: 10em; } .wifi__dot, .wifi__stick, .wifi__stick-left, .wifi__stick-right { transition: fill var(--trans-dur); } .wifi__fg, .wifi__stick-bounce, .wifi__stick-left, .wifi__stick-right, .wifi__stick-pivot, .wifi__waves-pivot { animation-duration: 4s; animation-timing-function: ease-in-out; transform-origin: 24px 28px; } .wifi__stick, .wifi__stick-left, .wifi__stick-right { fill: var(--primary17); } .wifi__stick-bounce { transform-origin: 24px 26px; } .wifi__wave { transition: stroke var(--trans-dur); } .wifi__fg .wifi__dot { fill: var(--primary17); } .wifi__fg .wifi__wave { stroke: var(--primary17); } .wifi--animated .wifi__fg { animation-name: foregroundFade; } .wifi--animated .wifi__stick-bounce { animation-name: stickBounce; } .wifi--animated .wifi__stick-left { animation-name: stickLeft; } .wifi--animated .wifi__stick-right { animation-name: stickRight; } .wifi--animated .wifi__stick-pivot { animation-name: stickPivot; } .wifi--animated .wifi__waves-pivot { animation-name: wavesPivot; } .btn { background-color: var(--primary9); border-radius: 0.2em; color: var(--primary1); padding: 0.75em 1.5em; transition: background-color 0.15s linear, opacity 0.15s linear; } .btn:focus { outline: transparent; } .btn:disabled { cursor: not-allowed; opacity: 0.5; } .btn:focus, .btn:hover { background-color: var(--primary11); } .btn:disabled:focus, .btn:disabled:hover { background-color: var(--primary9); } /* `:focus-visible` support */ @supports selector(:focus-visible) { .btn:focus { background-color: var(--primary9); } .btn:focus-visible, .btn:hover { background-color: var(--primary11); } } /* Dark theme */ @media (prefers-color-scheme: dark) { body { background-color: var(--primary19); color: var(--primary1); } .wifi__dot { fill: var(--primary15); } .wifi__stick, .wifi__stick-left, .wifi__stick-right { fill: var(--primary3); } .wifi__wave { stroke: var(--primary15); } .wifi__fg .wifi__dot { fill: var(--primary3); } .wifi__fg .wifi__wave { stroke: var(--primary3); } } /* Animations */ @keyframes foregroundFade { from, to { opacity: 0; } 5%, 95% { opacity: 1; } } @keyframes stickBounce { from, 75% { transform: translate(0,0) scale(1,1); } 78% { transform: translate(0,0) scale(1.25,0.75); } 81% { transform: translate(0,-8px) scale(1,1); } 84% { transform: translate(0,-6px) scale(1.125,0.625); } 87%, to { transform: translate(0,-6px) scale(1,0.775); } } @keyframes stickPivot { from, 5% { transform: rotate(-37deg); } 20%, 25% { transform: rotate(37deg); } 40%, 45% { transform: rotate(-37deg); } 60%, 65% { animation-timing-function: ease-in-out; transform: rotate(37deg); } 72.5%, 100% { transform: rotate(0); } } @keyframes stickLeft { from, 81% { transform: translate(0,0); } 84.........完整代码请登录后点击上方下载按钮下载查看
网友评论0