div+css实现炫酷翻滚圈圈loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现炫酷翻滚圈圈loading加载动画效果代码
代码标签: div 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 { --hue: 223; --bg: hsl(var(--hue),90%,95%); --fg: hsl(var(--hue),90%,5%); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background-color: var(--bg); color: var(--fg); font: 1em/1.5 sans-serif; height: 100vh; display: grid; place-items: center; transition: background-color 0.3s; } main { padding: 1.5em 0; } .sp { display: block; width: 8em; height: 8em; } .sp__ring { stroke: hsla(var(--hue),90%,5%,0.1); transition: stroke 0.3s; } .sp__worm1, .sp__worm2, .sp__worm2-1 { animation: worm1 5s ease-in infinite; } .sp__worm1 { transform-origin: 64px 64px; } .sp__worm2, .sp__worm2-1 { transform-origin: 22px 22px; } .sp__worm2 { animation-name: worm2; animation-timing-function: linear; } .sp__worm2-1 { animation-name: worm2-1; stroke-dashoffset: 175.92; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,5%); --fg: hsl(var(--hue),90%,95%); } .sp__ring { stroke: hsla(var(--hue),90%,95%,0.1); } } /* Animations */ @keyframes worm1 { from, to { stroke-dashoffset: 0 } 12.5% { animation-timing-function: ease-out; stroke-dashoffset: -175.91; } 25% { animation-timing-function: cubic-bezier(0,0,0.43,1); stroke-dashoffset: -307.88; } 50% { animation-timing-function: ease-in; stroke-dashoffset: -483.8; } 62.5% { animation-timing-function: ease-out; stroke-dashoffset: -307.88; } 75% { animation-timing-function: cubic-bezier(0,0,0.43,1); stroke-dashoffset: -175.91; } } @keyframes worm2 { from, 12.5%, 75%, to { transform: rotate(0) translate(-42px,0); } 25%, 62.5% { transform: rotate(0.5turn) translate(-42px,0); } } @keyframes worm2-1 { from { stroke-dashoffset: 175.91; transform: rotate(0); } 12.5% { animation-timing-function: cubic-bezier(0,0,0.42,1); stroke-dashoffset: 0; transform: rotate(0); } 25% { animation-timing-function: linear; stroke-dashoffset: 0; transform: rotate(1.5turn); } 37.5%, 50% { stroke-dashoffset: -175.91; transform: rotate(1.5turn); } 62.5% { animation-timing-function: cubic-bezier(0,0,0.42,1); stroke-dashoffset: 0; transform: rotate(1.5turn); } 75% { animation-timing-function: linear; stroke-dashoffset: 0; transform: rotate(0); } 87.5%, to { stroke-dashoffset: 175.92; transform: rotate(0); } } </style> </head> <body > <main> <svg class="sp" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0