css实现三种loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现三种loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --radius: 50%; --size: 2em; --offset: 25px; --background: #f5f5f7; } body { display: grid; place-items: center; width: 100vw; height: 100vh; background-color: var(--background); } article { display: flex; justify-content: space-around; width: 100%; } .dot-spinner, .rect-spinner { display: grid; place-items: center; position: relative; width: 4.25em; height: 4.25em; } .dot-spinner:focus, .rect-spinner:focus { outline: 4px solid blue; border-radius: var(--radius); } .rect-spinner { width: 4em; height: 4em; } .rect-spinner .container { margin-left: -8px; margin-top: 3px; --size: 1.5em; } .spinner-block { display: flex; flex-direction: column; align-items: center; } .container { width: var(--size); border-radius: var(--radius); aspect-ratio: 1; position: relative; } .dot { --size: 1em; --degrees: 0deg; aspect-ratio: 1; position: absolute; border-radius: var(--radius); width: var(--size); background-color: #1d1d1d; opacity: 0; top: calc(var(--size) / 2); left: calc(var(--size) / 2); animation: animate-in; animation-duration: 900ms; animation-timing-function: ease-in-out; animation-fill-mode: alternate; animation-iteration-count: infinite; } .rect { --size: 1em; --degrees: 0deg; position: absolute; width: var(--size); aspect-ratio: 4/1; top: calc(var(--size) / 2); left: calc(var(--size) / 2); background-color: #1d1d1d; border-radius: 20px; opacity: 0; animation: animate-in; animation-duration: 800ms; animation-timing-function: ease-in-out; animation-fill-mode: alternate; animation-iteration-count: infinite; } .comet-spinner { --radius: 1em; --tracksize: 0.75em; --degrees: 0deg; width: calc(var(--radius) * 2 + var(--tracksize)); aspect-ratio: 1; border-radius: 50%; padding: var(--tracksize); background: conic-gradient(from var(--degrees), #1BB8F7, #F8509C calc(var(--degrees) + 140deg), transparent calc(var(--degrees) + 210deg)); position: relative; display: grid; place-items: center; animation: comet linear 1000ms infinite; } .comet-spinner .inner-circle { width: calc(var(--radius) * 2 + var(--tracksize)); background-color: var(--background); position: absolute; aspect-ratio: 1; border-radius: 50%; } .comet-spinner .comet { width: var(--tracksize); height: var(--tracksize); background-color: #1BB8F7; position: absolute; border-radius: 50%; border: 2px solid #FFDC55; z-index: 3; left: calc((var(--tracksize) / 2)); top: 0; margin: -2px; translate: calc(cos(var(--degrees)) * var(--radius)) calc(sin(var(--degrees)) * var(--radius)); } .dot:nth-of-type(1) { --degrees: 0 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(0 * 100ms); } .dot:nth-of-type(2) { --degrees: 1 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(1 * 100ms); } .dot:nth-of-type(3) { --degrees: 2 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(2 * 100ms); } .dot:nth-of-type(4) { --degrees: 3 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(3 * 100ms); } .dot:nth-of-type(5) { --degrees: 4 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(4 * 100ms); } .dot:nth-of-type(6) { --degrees: 5 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(5 * 100ms); } .dot:nth-of-type(7) { --degrees: 6 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(6 * 100ms); } .dot:nth-of-type(8) { --degrees: 7 * 360deg / 8; transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset))); animation-delay: calc(7 * 100ms); } .rect:nth-of-type(0) { --degrees: 0 * 360deg / 16; transform: rotate(calc(var(--degrees))) translateX(var(--offset)); animation-delay: calc(0 * 50ms); } .rect:nth-of-type(1) { --degrees: 1 * 360deg / 16; transform: rotate(calc(var(--degrees))) translateX(var(--offset)); animation-delay: calc(1 * 50ms); } .rect:nth-of-type(2) { --degrees: 2 * 360deg / 16; transform: rotate(calc(var(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0