div+css实现花环装饰物悬挂旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现花环装饰物悬挂旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> div { --h: 193; border: 3vmin double hsl(var(--h) 100% var(--s, 50%)); border-radius: 50%; 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.25) ); } @keyframes spinner { 0% { transform: var(--prefix-transform) rotateY(0turn); } 100% { transform: var(--prefix-transform) rotateY(10turn); } } div > div { --prefix-transform: ; --h: 143; } div > div > div { --h: 163; } div > div > div > div { --h: 153; --s: 30%; } div > div > div > div > div { --h: 103; --s: 50%; } div > div > div > div > div > div { --h: 183; opacity: 0; } @media all and (prefers-reduced-motion: no-preference) { div { animation-delay: calc(var(--i) * 1000ms); animation-play-stat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0