单个div+css实现轮盘loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:单个div+css实现轮盘loading加载动画效果代码
代码标签: 单个 div css 轮盘 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: var(--backgroundColor); min-height: 100vh; display: grid; place-items: center; } :root { --backgroundColor: #022; --rouletteColor: white; } .roulette { position: relative; width: 160px; aspect-ratio: 1; background-image: radial-gradient(closest-side, var(--backgroundColor) 44%, var(--rouletteColor) 45% 47%, transparent 48% 61%, var(--rouletteColor) 62% 64%, var(--backgroundColor) 65% 95%, var(--rouletteColor) 96% 97%, var(--backgroundColor) 100%), repeating-conic-gradient(red 0deg 7deg, var(--rouletteColor) 8deg 9deg, black 10deg 17deg, var(--rouletteColor) 18deg 19deg, red 20deg); -webkit-animation: roulette 8s infinite linear; animation: roulette 8s infinite linear; } @-webkit-keyframes roulette { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes roulette { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .roulette::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; background-image: radial-gradient(var(--rouletteColor) 20%, transparent 21%), linear-gradient(transparent 45%, var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0