css实现弹力弹簧圈圈伸缩动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现弹力弹簧圈圈伸缩动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; transform-style: preserve-3d; transition: all 0.2s; } @property --x { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; } @property --sx { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; } @property --sz { syntax: '<length>'; inherits: false; initial-value: 0; } @property --z { syntax: '<length>'; inherits: true; initial-value: 0; } @property --r { syntax: '<angle>'; inherits: false; initial-value: 0deg; } @property --rs { syntax: '<angle>'; inherits: false; initial-value: 0deg; } @property --opacity { syntax: '<number>'; inherits: false; initial-value: 0; } @property --speed { syntax: '<time>'; inherits: true; initial-value: 1.75s; } :root { --border-width: 2vmin; --depth: 26vmin; --stack-height: 10vmin; --scene-size: 26vmin; --ring-size: calc(var(--scene-size) * 0.8); --plane: radial-gradient(rgba(0,0,0,0.1) 50%, transparent 65%); --ring-shadow: rgba(0,0,0,0.5); --hue-one: 210; --hue-two: 320; --blur: 6px; --bg: #fafafa; --ring-filter: brightness(1) drop-shadow(0 0 0 var(--accent)); } @media (prefers-color-scheme: dark) { :root { --bg: #262626; --ring-shadow: hsla(var(--hue-one), 90%, 40%, 1); --plane: radial-gradient(hsla(var(--hue-one), 90%, 60%, 0.1) 50%, transparent 65%); --ring-filter: brightness(1.75) drop-shadow(0 0 1vmin var(--accent)); } } body { background: var(--bg); min-height: 100vh; display: grid; place-items: center; overflow: hidden; } .scene { height: var(--scene-size); width: var(--scene-size); transform: translate3d(var(--sx), 0, var(--sz)); -webkit-animation: step-down var(--speed) infinite linear; animation: step-down var(--speed) infinite linear; } .scene__shadow { position: absolute; top: 0; left: 100%; height: 100%; width: 100%; opacity: var(--opacity); -webkit-animation: fade-in var(--speed) infinite linear; animation: fade-in var(--speed) infinite linear; background: var(--plane); transform: scale(1.25); filter: blur(var(--blur)); } .plane { height: 100%; width: 100%; transform: translate3d(0, 0, var(--depth)); position: relative; } .plane__shadow { content: ''; height: 100%; width: 100%; position: absolute; top: 50%; left: 50%; background: var(--plane); filter: blur(var(--blur)); transform: translate(-50%, -50%) scale(1.25); opacity: var(--opacity); -webkit-animation: fade-out var(--speed) infinite linear; animation: fade-out var(--speed) infinite linear; } .scene__shadow:after, .plane__shadow:after { content: ''; height: var(--ring-size); width: var(--ring-size); position: absolute; top: 50%; left: 50%; border: var(--border-width) solid var(--ring-shadow); border-radius: 50%; transform: translate(-50%, -50%) scale(0.8); } .container { transform: translate3d(0, 0, 100vmin) rotateX(-24deg) rotateY(35deg) rotateX(90deg) translate3d(0, 0, calc(var(--depth) * -1.5)) rotate(var(--rs)); -webkit-animation: rotate-scene calc(var(--speed) * 10) infinite linear; animation: rotate-scene calc(var(--speed) * 10) infinite linear; } .ring { --origin-z: calc(var(--stack-height) - (var(--stack-height) / var(--ring-count)) * var(--index)); --hue: var(--hue-one); --accent: hsl(var(--hue) 90% 50%); --ring-filter: brightness(1) drop-shadow(0 0 0 var(--accent)); height: var(--ring-size); width: var(--ring-size); border-radius: 50%; border: var(--border-width) solid var(--accent); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, var(--origin-z)) translate3d(var(--x), 0, var(--z)) rotateY(var(--r)); transform-origin: 110% 50%; -webkit-animation-name: var(--name); animation-name: var(--name); -webkit-animation-duration: var(--speed); animation-duration: var(--speed); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.25, 0, 1, 1); animation-timing-function: cubic-bezier(0.25, 0, 1, 1); filter: var(--ring-filter); } .ring:nth-of-type(odd) { --hue: var(--hue-two); } @media (prefers-color-scheme: dark) { .ring { --ring-filter: brightness(2) drop-shadow(0 0 calc(var(--border-width) * 0.5) var(--accent)); } } @-webkit-keyframes spring-0 { 0%, 3.8461538461538463% { --z: 0; --x: 0%; --r: 0deg; } 41.34615384615385% { --r: 180deg; --x: 5%; --z: 0; } 53.84615384615385%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @keyframes spring-0 { 0%, 3.8461538461538463% { --z: 0; --x: 0%; --r: 0deg; } 41.34615384615385% { --r: 180deg; --x: 5%; --z: 0; } 53.84615384615385%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @-webkit-keyframes spring-1 { 0%, 7.6923076923076925% { --z: 0; --x: 0%; --r: 0deg; } 45.19230769230769% { --r: 180deg; --x: 5%; --z: 0; } 57.69230769230769%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @keyframes spring-1 { 0%, 7.6923076923076925% { --z: 0; --x: 0%; --r: 0deg; } 45.19230769230769% { --r: 180deg; --x: 5%; --z: 0; } 57.69230769230769%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @-webkit-keyframes spring-2 { 0%, 11.538461538461538% { --z: 0; --x: 0%; --r: 0deg; } 49.03846153846154% { --r: 180deg; --x: 5%; --z: 0; } 61.53846153846154%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @keyframes spring-2 { 0%, 11.538461538461538% { --z: 0; --x: 0%; --r: 0deg; } 49.03846153846154% { --r: 180deg; --x: 5%; --z: 0; } 61.53846153846154%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @-webkit-keyframes spring-3 { 0%, 15.384615384615385% { --z: 0; --x: 0%; --r: 0deg; } 52.88461538461539% { --r: 180deg; --x: 5%; --z: 0; } 65.38461538461539%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @keyframes spring-3 { 0%, 15.384615384615385% { --z: 0; --x: 0%; --r: 0deg; } 52.88461538461539% { --r: 180deg; --x: 5%; --z: 0; } 65.38461538461539%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @-webkit-keyframes spring-4 { 0%, 19.23076923076923% { --z: 0; --x: 0%; --r: 0deg; } 56.730769230769226% { --r: 180deg; --x: 5%; --z: 0; } 69.23076923076923%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @keyframes spring-4 { 0%, 19.23076923076923% { --z: 0; --x: 0%; --r: 0deg; } 56.730769230769226% { --r: 180deg; --x: 5%; --z: 0; } 69.23076923076923%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @-webkit-keyframes spring-5 { 0%, 23.076923076923077% { --z: 0; --x: 0%; --r: 0deg; } 60.57692307692308% { --r: 180deg; --x: 5%; --z: 0; } 73.07692307692308%, 100% { --z: calc((var(--depth) + var(--origin-z) - (var(--stack-height) - ((var(--stack-height) - (var(--stack-height) / var(--ring-count)) * (var(--index) + 1))))) * -1); --x: 5%; --r: 180deg; } } @keyframes spring-5 { 0%, 23.076923076923077% { --z: 0; --x: 0%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0