css实现多彩正方形弥红线灯嵌套三维旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现多彩正方形弥红线灯嵌套三维旋转动画效果代码
代码标签: css 多彩 正方形 弥红 线 灯 嵌套 三维 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> div { --h: 303; border: 3vmin double hsl(var(--h), 100%, 50%); border-radius: 2.5vmin; margin: 2.5vmin; min-height: 15vmin; min-width: 15vmin; max-width: 100vmin; transform-style: preserve-3d; --prefix-transform: scale(0.75); animation: spinner 60000ms calc(var(--i) * -7200ms - 2000ms) infinite alternate ease-in-out backwards; animation-play-state: paused; background: radial-gradient( circle, hsl(var(--h) 100% 50% / 0), hsl(var(--h) 100% 50% / 0), hsl(var(--h) 100% 50% / 0.5) ); } @keyframes spinner { 0% { transform: var(--prefix-transform) rotateZ(0.25turn) rotateX(0turn); } 100% { transform: var(--prefix-transform) rotateZ(0.25turn) rotateX(10turn); } } div > div { --prefix-transform: ; --h: 343; } div > div > div { --h: 23; } div > div > div > div { --h: 43; } div > div > div > div > div { --h: 103; } div > div > div > div > div > div { --h: 183; } @media all and (prefers-reduced-motio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0