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; } :root { --border-width: 1.2vmin; --depth: 20vmin; --stack-height: 6vmin; --scene-size: 20vmin; --ring-size: calc(var(--scene-size) * 0.6); --plane: radial-gradient(rgba(0,0,0,0.1) 50%, transparent 55%); --red: #ff4d00; --green: #38b24d; --yellow: #ebb624; --blue: #0f73ff; --ring-shadow: rgba(0,0,0,0.75); --hue-one: 320; --hue-two: 210; --blur: 0.25vmin; --speed: 1.2s; --bg: #fafafa; --ring-filter: brightness(1) drop-shadow(0 0 0 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); -webkit-animation: step-up var(--speed) infinite ease; animation: step-up var(--speed) infinite ease; } .scene__shadow { position: absolute; top: 0; left: 100%; height: 100%; width: 100%; -webkit-animation: fade-in var(--speed) infinite linear; animation: fade-in var(--speed) infinite linear; background: var(--plane); transform: scale(1.15); filter: blur(var(--blur)); } .flipper { height: var(--scene-size); width: var(--scene-size); -webkit-animation: flip-flop calc(var(--speed) * 2) infinite steps(1); animation: flip-flop calc(var(--speed) * 2) infinite steps(1); } .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); -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: translateZ(100vmin) rotateX(-12deg) rotateY(0deg) rotateX(90deg) translateZ(calc(var(--depth) * -1.5)) rotate(0deg); -webkit-animation: rotate-scene calc(var(--speed) * 40) infinite linear; animation: rotate-scene calc(var(--speed) * 40) infinite linear; } .ring { --origin-z: calc(var(--stack-height) - (var(--stack-height) / var(--ring-count)) * var(--index)); --destination-z: calc(((var(--depth) + var(--origin-z)) - (var(--stack-height) - var(--origin-z))) * -1); --hue: var(--hue-one); --accent: hsl(var(--hue) 100% 55%); --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-origin: calc(100% + (var(--scene-size) * 0.2)) 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(1n) { --accent: var(--red); } .ring:nth-of-type(2n) { --accent: var(--yellow); } .ring:nth-of-type(3n) { --accent: var(--green); } .ring:nth-of-type(4n) { --accent: var(--blue); } @-webkit-keyframes slink-0 { 0%, 2.0869565217391304% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 38.08695652173913% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 50.08695652173913%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-0 { 0%, 2.0869565217391304% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 38.08695652173913% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 50.08695652173913%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-1 { 0%, 4.173913043478261% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 40.17391304347826% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 52.17391304347826%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-1 { 0%, 4.173913043478261% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 40.17391304347826% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 52.17391304347826%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-2 { 0%, 6.260869565217391% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 42.26086956521739% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 54.26086956521739%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-2 { 0%, 6.260869565217391% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 42.26086956521739% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 54.26086956521739%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-3 { 0%, 8.347826086956522% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 44.34782608695652% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 56.34782608695652%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-3 { 0%, 8.347826086956522% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 44.34782608695652% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 56.34782608695652%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-4 { 0%, 10.434782608695652% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 46.434782608695656% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 58.434782608695656%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-4 { 0%, 10.434782608695652% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 46.434782608695656% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 58.434782608695656%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-5 { 0%, 12.521739130434781% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 48.52173913043478% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 60.52173913043478%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-5 { 0%, 12.521739130434781% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 48.52173913043478% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 60.52173913043478%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-6 { 0%, 14.608695652173912% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 50.608695652173914% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 62.608695652173914%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-6 { 0%, 14.608695652173912% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 50.608695652173914% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 62.608695652173914%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-7 { 0%, 16.695652173913043% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 52.69565217391305% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 64.69565217391305%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-7 { 0%, 16.695652173913043% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 52.69565217391305% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 64.69565217391305%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-8 { 0%, 18.782608695652172% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 54.78260869565217% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 66.78260869565217%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-8 { 0%, 18.782608695652172% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 54.78260869565217% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 66.78260869565217%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-9 { 0%, 20.869565217391305% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 56.869565217391305% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 68.86956521739131%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-9 { 0%, 20.869565217391305% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 56.869565217391305% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 68.86956521739131%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-10 { 0%, 22.956521739130434% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 58.95652173913044% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 70.95652173913044%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-10 { 0%, 22.956521739130434% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 58.95652173913044% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 70.95652173913044%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-11 { 0%, 25.043478260869563% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 61.04347826086956% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 73.04347826086956%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @keyframes slink-11 { 0%, 25.043478260869563% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(0deg); } 61.04347826086956% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(180deg); } 73.04347826086956%, 100% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(var(--destination-z)) rotateY(180deg); } } @-webkit-keyframes slink-12 { 0%, 27.130434782608695% { transform: translate3d(-50%, -50%, var(--origin-z)) translateZ(0) rotateY(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0