svg+css实现彩色竖条波动loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:svg+css实现彩色竖条波动loading加载动画效果代码
代码标签: svg css 彩色 竖条 波动 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import "normalize.css"; *, *:after, *:before { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background: hsl(210 30% 10%); } svg { width: 50vmin; } :root { --speed: .875s; } g:nth-of-type(1) { --delay: 0.35; } g:nth-of-type(2) { --delay: 0.5; } g:nth-of-type(3) { --delay: 0.75; } g:nth-of-type(4) { --delay: 1; } g:nth-of-type(5) { --delay: 0.75; } g:nth-of-type(6) { --delay: 0.5; } g:nth-of-type(7) { --delay: 0.35; } line { transform-origin: 50% 50%; translate: 0 -50%; -webkit-animation: drop var(--speed) calc((sin(var(--delay)) * -1s)) infinite alternate ease-in-out; animation: drop var(--speed) calc((sin(var(--delay)) * -1s)) infinite alternate ease-in-out; } @-webkit-keyframes drop { 0%, 5% { translate: 0 -50%; } 95%, 100% { translate: 0 50%; } } @keyframes drop { 0%, 5% { translate: 0 -50%; } 95%, 100% { translate: 0 50%; } } line, circle { transform-box: fill-box; } circle:first-of-type { transform-origin: 50% 100%; -webkit-animation: pulse calc(var(--speed) * 2) calc((sin(var(--delay)) * -1s)) infinite ease-in-out; animation: pulse calc(var(--speed) * 2) calc((sin(var(--delay)) * -1s)) infinite ease-in-out; } circle:last-of-type { transform-origin: 50% 0%; -webkit-animation: pulse calc(var(--speed) * 2) calc(((sin(var(--delay)) * -1s) + (var(--speed) * -1))) infinite ease-in-out; animation: pulse calc(var(--speed) * 2) calc(((sin(var(--delay)) * -1s) + (var(--speed) * -1))) infinite ease-in-out; } @-webkit-keyframes pulse { 0%, 20% { transform: scale(1); } 50%, 100% { transform: scale(0); } } @keyframes pulse { 0%, 20% { transform: scale(1); } 50%, 100% { transform: scale(0); } } svg { overflow: visible !important; } </style> </head> <body translate="no"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 350"> <defs> <filter id="goo"> <feGaussianBlur id="SvgjsFeGaussianBlur1000" result="SvgjsFeGaussianBlur1000" in="SourceGraphic" stdDeviation="10"> </feGaussianBlur> <feColorMatrix id="SvgjsFeColorMatrix1001" result="SvgjsFeColorMatrix1001" in="SvgjsFeGaussianBlur1000" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -10" type="matrix"></feColorMatrix> <feComposite id="SvgjsFeComposite1002" result="SvgjsFeComposite1002" in="SvgjsFeColorMatrix1001" operator="atop"> </feComposite> </filter> <linearGradient id="g" x1="100%" x2="0" y1="0" y2="80%" gradientTransform="rotate(10)"> <stop offset="10%" stop-color="hsl(10, 90%, 50%)" /> <stop offset="22%" stop-color="hsl(35, 90%, 50%)" /> <stop offset="38%" stop-color="hsl(45, 90%, 50%)" /> <stop offset="50%" stop-color="hsl(180, 90%, 50%)" /> <stop offset="70%" stop-color="hsl(210, 90%, 50%)" /> <stop offset="84%" stop-color="hsl(280, 90%, 50%)" /> <stop of.........完整代码请登录后点击上方下载按钮下载查看
网友评论0