css+js模拟系统处理中loading框及处理成功结果动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css结合js模拟用户操作系统,系统请求处理中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"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,20%); --fg: hsl(var(--hue),10%,90%); --primary: hsl(var(--hue),90%,55%); --primary-dn: hsl(var(--hue),90%,45%); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body, button { font: 1em/1.5 Hind, sans-serif; } body { background: var(--bg); color: var(--fg); height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } button { animation: reappear 3s steps(1) forwards; background-color: var(--primary); border-radius: 0.2em; color: hsl(0,0%,100%); padding: 0.5em 1em; transition: background-color 0.1s linear; -webkit-appearance: none; appearance: none; } button:focus, button:hover { background-color: var(--primary-dn); } button:focus { outline: none; } button, .check-spinner__worm-a, .check-spinner__worm-b { visibility: hidden; } .check-spinner { margin-bottom: 3em; overflow: visible; width: 6.25em; height: 6.25em; } .check-spinner__worm-a { animation: worm-a 1.2s linear; } .check-spinner__worm-b { animation: worm-b 1.2s 1.2s linear forwards; stroke-dashoffset: 0.01; } .check-spinner__circle { animation: circle 0.2s 2.3s cubic-bezier(0,0,.42,1.33) forwards; } /* Animations */ @keyframes worm-a { from { stroke-dashoffset: 36.1; visibility: visible; } to { stroke-dashoffset: -252.9; visibility: visible; } } @keyframes worm-b { from { animation-timing-function: linear; stroke-dasharray: 0 0 72.2 341.3; visibility: visible; } 69.7% { animation-timing-function: ease-out; stroke-dasharray: 0 207 45 341.3; visibility: visible; } to { animation-timing-function: ease-out; stroke-dasharray: 0 297 45 341.3; visibility: visible; } } @keyframes circle { from { r: 0; } to { r: 50px; } } @keyframes reappear { from { visibility: hidden; } to { visibility: visible; } } </style> </head> <body> <svg class="check-spinner" viewBox="0 0 100 100" width="100px" height="100px"> <defs> <linearGradient id="cs-grad-1" x1="0.5" y1="0" x2="0.5" y2="1"> <stop offset="0%" stop-color="hsl(0,0%,100%)" /> <stop offset="100%" stop-color="hsl(0,0%,80%)" /> </linearGradient> <linearGradie.........完整代码请登录后点击上方下载按钮下载查看
网友评论0