div+css实现彩色圈圈堆叠loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现彩色圈圈堆叠loading加载动画效果代码
代码标签: div css 彩色 圈圈 堆叠 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('//repo.bfw.wiki/bfwrepo/css/normalize.css') layer(normalize); @layer normalize, base, demo; @layer demo { :root { --speed: 3.5s; } .loader { width: 75%; aspect-ratio: 1 / 1; position: relative; container-type: size; scale: 1 -1; transform-style: preserve-3d; } .frame { width: 120px; aspect-ratio: 1; display: grid; place-items: center; background: light-dark(hsl(0 0% 98%), hsl(0 0% 94%)); border-radius: 24px; border: 1px solid hsl(0 0% 75% / 0.5); box-shadow: 0 40px 30px -18px hsl(30 80% 50% / 0.35), 0 20px 20px -12px hsl(30 80% 50% / 0.35), 0 -2px 4px 2px hsl(30 80% 90% / 0.75) inset; } .loader span { width: 90%; aspect-ratio: 10 / 2.25; position: absolute; top: 0%; left: 50%; translate: -50% 0%; border-radius: 50%; border: 1px solid hsl(0 0% 50%); scale: 0.25; -webkit-animation: hue var(--speed) calc((-1 * var(--speed)) * (var(--idx) / 10)) infinite ease-in-out reverse, travel var(--speed) calc((-1 * var(--speed)) * (var(--idx) / 10)) infinite linear, scale calc(var(--speed) * 0.5) calc((-1 * var(--speed)) * (var(--idx) / 10)) infinite alternate; animation: hue var(--speed) calc((-1 * var(--speed)) * (var(--idx) / 10)) infinite ease-in-out reverse, travel var(--speed) calc((-1 * var(--speed)) * (var(--idx) / 10)) infinite linear, scale calc(var(--speed) * 0.5) calc((-1 * var(--speed)) * (var(--idx) / 10)) infinite alternate; } @property --hue { syntax: '<number>'; initial-value: 0; inherits: true; } .loader span { --bg: hsl(var(--hue) 85% 58% / 0.85); background: radial-gradient(hsl(0 0% 100% / 0.25), #0000), var(--bg); border-color: color-mix(in hsl, var(--bg), white 20%); } @-webkit-keyframes hue { 0% { --hue: 350; } 100% { --hue: 40; } } @keyframes hue { 0% { --hue: 350; } 100% { --hue: 40; } } @-webkit-keyframes scale { 0% { opacity: 0; } 15%, 25% { opacity: 1; } 100% { opacity: 1; scale: 1; } } @keyframes scale { 0% { opacity: 0; } 15%, 25% { opacity: 1; } 100% { opacity: 1; scale: 1; } } @-webkit-keyframes travel { 0%, 5% { transform: translate3d(0, 0, 0); translate: -50% -5%; } 95%, 100% { transform: translate3d(0, 0, 10px); translate: -50% calc(100cqb - 95%); } } @keyframes travel { 0%, 5% { transform: translate3d(0, 0, 0); translate: -50% -5%; } 95%, 100% { transform: translate3d(0, 0, 10px); translate: -50% calc(100cqb - 95%); } } } @layer base { :root { --font-size-min: 16; --font-size-max: 20; --font-ratio-min: 1.2; --font-ratio-max: 1.33; --font-width-min: 375; -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0