css实现贪吃蛇loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现贪吃蛇loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 76; --primary1: hsl(var(--hue),72%,45%); --primary2: hsl(var(--hue),72%,10%); --bg: var(--primary1); --fg: var(--primary2); --trans-dur: 0.3s; font-size: clamp(1rem,0.95rem + 0.25vw,1.25rem); } body { background-color: var(--bg); color: var(--fg); display: flex; font: 1em/1.5 sans-serif; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .snake { display: block; margin: auto; width: 10em; height: auto; } .snake__dot, .snake__line { animation-duration: 10s; animation-iteration-count: infinite; } .snake__dot { animation-name: snake-dot; animation-timing-function: steps(1, start); } .snake__line { animation-name: snake-grow, snake-move; } .snake__grid { transition: stroke var(--trans-dur); } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: var(--primary2); --fg: var(--primary1); } } /* Animations */ @keyframes snake-dot { 0% { transform: translate(0px, 20px); } 5% { transform: translate(0px, 20px); } 9% { transform: translate(0px, 60px); } 13% { transform: translate(30px, 70px); } 17% { transform: translate(70px, 70px); } 22% { transform: translate(70px, 20px); } 26% { transform: translate(50px, 0px); } 30% { transform: translate(10px, 0px); } 35% { transform: translate(0px, 40px); } 39% { transform: translate(10px, 70px); } 43% { transform: translate(50px, 70px); } 48% { transform: translate(70px, 40px); } 53% { transform: translate(60px, 0px); } 58% { transform: translate(10px, 0px); } 64% { transform: translate(0px, 50px); } 68% { transform: translate(20px, 70px); } 72% { transform: translate(60px, 70px); } 76% { transform: translate(70px, 40px); } 81% { transform: translate(60px, 0px); } 85% { transform: translate(20px, 0px); } 89% { transform: translate(0px, 20px); } 93% { transform: translate(0px, 60px); } 96% { transform: translate(20px, 70px); } 98% { transform: translate(40px, 70px); } 99% { transform: translate(50px, 70px); } 100% { transform: translate(-20px, 0px); } } @keyframes snake-grow { 0% { animation-timing-function: steps(1, end); stroke-dasharray: 30.01 250; } 5% { animation-timing-function: steps(1, end); stroke-dasharray: 40.01 240; } 9% { animation-timing-function: steps(1, end); stroke-dasharray: 50.01 230; } 13% { animation-timing-function: steps(1, end); str.........完整代码请登录后点击上方下载按钮下载查看
网友评论0