svg+css实现指南针loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:svg+css实现指南针loading加载动画效果代码
代码标签: 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 { --hue: 223; --bg: hsl(var(--hue),90%,25%); --fg: hsl(var(--hue),10%,90%); --trans-dur: 0.3s; font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background: var(--bg); color: var(--fg); font: 1em/1.5 sans-serif; height: 100vh; display: grid; place-items: center; } .pl { display: block; width: 9.375em; height: 9.375em; } .pl__arrows, .pl__ring-rotate, .pl__ring-stroke, .pl__tick { animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } .pl__arrows { animation-name: arrows; transform: rotate(45deg); transform-origin: 16px 52px; } .pl__ring-rotate, .pl__ring-stroke { transform-origin: 80px 80px; } .pl__ring-rotate { animation-name: ringRotate; } .pl__ring-stroke { animation-name: ringStroke; transform: rotate(-45deg); } .pl__tick { animation-name: tick; } .pl__tick:nth-child(2) { animation-delay: -1.75s; } .pl__tick:nth-child(3) { animation-delay: -1.5s; } .pl__tick:nth-child(4) { animation-delay: -1.25s; } .pl__tick:nth-child(5) { animation-delay: -1s; } .pl__tick:nth-child(6) { animation-delay: -0.75s; } .pl__tick:nth-child(7) { animation-delay: -0.5s; } .pl__tick:nth-child(8) { animation-delay: -0.25s; } /* Animations */ @keyframes arrows { from { transform: rotate(45deg); } to { transform: rotate(405deg); } } @keyframes ringRotate { from { transform: rotate(0); } to { transform: rotate(720deg); } } @keyframes ringStroke { from, to { stroke-dashoffset: 452; transform: rotate(-45deg); } 50% { stroke-dashoffset: 169.5; transform: rotate(-180deg); } } @keyframes tick { from, 3%, 47%, to { stroke-dashoffset: -12; } 14%, 36% { stroke-dashoffset: 0; } } </style> </head> <body > <svg class="pl" viewBox="0 0 160 160" width="160px" height="160px" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#000" /> <stop offset="100%" stop-color="#fff" /> </linearGradient> <mask id="mask1"> <rect x="0" y="0" width="160" height="160" fill="url(#grad)" /> </mask> <mask id="mask2"> <rect x="28" y="28" width="104" height="104" fill="url(#grad)" /> </mask> </defs> <!-- Ring --> <g> <g class="pl__ring-rotate"> <circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(223,90%,55%)" stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452" stroke-linecap="round" transform="rotate(-45,80,80)" /> </g> </g> <g mask="url(#mask1)"> <g class="pl__ring-rotate"> <circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(193,90%,55%)" stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452" stroke-linecap="round" transform="rotate(-45,80,80)" /> </g> </g> <!-- Ticks --> <g> <g stroke-width="4" stroke-dasharray="12 12" stroke-dashoffset="12" stroke-linecap="round" transform="translate(80,80)"> <polyline class="pl__tick" stroke="hsl(223,10%,9.........完整代码请登录后点击上方下载按钮下载查看
网友评论0