div+css实现炫酷半圆交错式loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现炫酷半圆交错式loading加载动画效果代码
代码标签: div css 炫酷 半圆 交错式 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --sp: 2.5s; /* change speed */ } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(#222, #101010); } .content { width: 50vmin; height: 50vmin; position: relative; display: flex; align-items: center; justify-content: center; transform: scale(0.65); animation: spin-all calc(var(--sp) * 2) linear 0s infinite } .circle { --in: 80%; --ar: #ff9800; --dt: #ffea34; --shadow: drop-shadow(0vmin 0vmin 0.5vmin #000) drop-shadow(0vmin 1vmin 0.5vmin #0004); --cross: linear-gradient(0deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px)), linear-gradient(90deg, #fff0 calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px), #fff0 calc(50% + 2px)); border: 6vmin solid var(--ar); width: var(--in); height: var(--in); border-radius: 100%; position: absolute; box-sizing: border-box; border-top-color: #fff0; border-left-color: #fff0; top: 15vmin; right: -10vmin; animation: spin-bot var(--sp) ease 0s infinite; background-image: var(--cross), radial-gradient(var(--dt) 5.5vmin, #fff0 calc(5.5vmin + 1px)); background-repeat: no-repeat; background-size: 3vmin 1vmin, 1vmin 3vmin, 100% 100%; background-position: center center; filter: var(--shadow); } .circle:nth-child(2) { --in: 60%; top: -2vmin; animation: spin-top var(--sp) ease 0s infinite; transform: rotate(-45deg); background-image: var(--cross), radial-gradient(var(--dt) 1.25vmin, #fff0 calc(1.25vmin + 1px)); right: -4vm.........完整代码请登录后点击上方下载按钮下载查看
网友评论0