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)) scale(var(--scale)); } @supports (background: paint(foo)) { .rings:before, .rings:after { -webkit-animation: ring var(--duration) ease-in-out infinite; animation: ring var(--duration) ease-in-out infinite; } } @supports not (background: paint(foo)) { .rings:before, .rings:after { -webkit-animation: ring-legacy var(--duration) ease-in-out infinite; animation: ring-legacy var(--duration) ease-in-out infinite; } } .rings:before { --start: 180deg; } .rings:after { --start: 90deg; } .rings > .rings:before { --start: 360deg; } .rings > .rings:after { --start: 270deg; } @-webkit-keyframes ring { from { --value: var(--start); --scale: 1; } 50% { --scale: 1.2; --width-ratio: 1.5; } 70% { --scale: 1; --value: calc(var(--start) + 180deg); --width-ratio: 1; } 80% { --scale: 1.2; --width-ratio: 1.5; } to { --value: calc(var(--start) + 360deg); --scale: 1; --width-ratio: 1; } } @keyframes ring { from { --value: var(--start); --scale: 1; } 50% { --scale: 1.2; --width-ratio: 1.5; } 70% { --scale: 1; --value: calc(var(--start) + 180deg); --width-ratio: 1; } 80% { --scale: 1.2; --width-ratio: 1.5; } to { --value: calc(var(--start) + 360deg); --scale: 1; --width-ratio: 1; } } @-webkit-keyframes ring-legacy { from { --value: var(--start); --scale: 1; transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale)); } 70% { --scale: 1.2; --value: calc(var(--start) + 180deg); transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale)); } to { --value: calc(var(--start) + 360deg); --scale: 1; transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale)); } } @keyframes ring-legacy { from { --value: var(--start); --scale: 1; transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale)); } 70% { --scale: 1.2; --value: calc(var(--start) + 180deg); transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale)); } to { --value: calc(var(--start) + 360deg); --scale: 1; transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale)); } } .iris { display: grid; place-items: center; position: absolute; inset: 0; filter: brightness(1.5) saturate(1.5); font-size: 12vmin; display: grid; place-items: center; background-size: 2vmin; color: rgba(255, 255, 255, 0.8); } @-webkit-keyframes eye { from { transform: translateX(0); } 10% { transform: translateX(0.5vmin) translateY(0.5vmin) scale(1.01); } 30% { transform: translateX(-0.5vmin) translateY(0.5vmin); } 31% { transform: translateX(-0.5vmin) translateY(0.5vmin) scaleY(0.5); } 32% { transform: translateX(-0.5vmin) translateY(0.5vmin); } 40% { transform: translateX.........完整代码请登录后点击上方下载按钮下载查看
网友评论0