svg+css实现跳动的蠕虫loading动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:svg+css实现跳动的蠕虫loading动画效果代码
下面为部分代码预览,完整代码请点击下载或在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"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background: #e3e4e8; display: grid; font: 1em/1.5 sans-serif; place-items: center; height: 100vh; } .pl { width: 6em; height: 6em; } .pl__ring { animation: ringA 2s linear infinite; } .pl__ring--a { stroke: #f42f25; } .pl__ring--b { animation-name: ringB; stroke: #f49725; } .pl__ring--c { animation-name: ringC; stroke: #255ff4; } .pl__ring--d { animation-name: ringD; stroke: #f42582; } /* Dark theme */ @media (prefers-color-scheme: dark) { body { background: #17181c; } } /* Animations */ @keyframes ringA { from, 4% { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -330; } 12% { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -335; } 32% { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -595; } 40%, 54% { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -660; } 62% { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -665; } 82% { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -925; } 90%, to { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -990; } } @keyframes ringB { from, 12% { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -110; } 20% { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -115; } 40% { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -195; } 48%, 62% { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -220; } 70% { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -225; } 90% { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -305; } 98%, to { stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -330; } } @keyframes ringC { from { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: 0; } 8% { stroke-dasharray: 40 4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0