svg+css实现彩色光片小球旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现彩色光片小球旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --value { syntax: "<angle>"; inherits: true; initial-value: 0deg; } @property --width-ratio { syntax: "<number>"; inherits: true; initial-value: 0; } @property --scale { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --width: 12vmin; --duration: 10s; --size: 36vmin; } @supports not (background: paint(foo)) { :root { --duration: 4s; } } .rings { filter: url(#blurFilter); width: var(--size); aspect-ratio: 1; border-radius: 50%; position: relative; perspective: var(--size); } .rings:before, .rings:after { content: ""; position: absolute; inset: 0; background: red; border-radius: 50%; --width-ratio: 1; border: calc(var(--width) * var(--width-ratio)) solid transparent; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); background: conic-gradient(from calc(var(--value) * 3), #ff8c41, transparent, #6666d2, #bb2727, #3bf6ff, transparent, transparent, #00a8ff, transparent, magenta, yellow, orange, transparent, transparent, transparent) border-box; -webkit-mask-composite: xor; mask-composite: exclude; --start: 180deg; --value: var(--start); --scale: 1; transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)).........完整代码请登录后点击上方下载按钮下载查看
网友评论0