css实现一个玩具圈圈散开动画效果
代码语言:html
所属分类:动画
代码描述:css实现一个玩具圈圈散开动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1280 - 320)); } body { background: #000; display: flex; font: 1em/1.5 sans-serif; height: 100vh; } .slinky { animation: camera 2s ease-in-out infinite; margin: auto; position: relative; width: 8em; height: 14em; } .slinky__ring { border-radius: 50%; box-shadow: 0 0 0 0.25em #255ff4 inset, 0 0 4.5em rgba(37, 95, 244, 0.3) inset, 0 0 4.25em rgba(37, 95, 244, 0.3); position: absolute; left: 0; width: inherit; height: 4em; transform: translateY(0) rotateZ(0) rotateX(0) translateX(-0.75em); transform-origin: 100% 50%; } .slinky__ring:nth-child(1) { animation: move1 2s linear infinite; bottom: 0em; } .slinky__ring:nth-child(2) { animation: move2 2s linear infinite; bottom: 0.25em; } .slinky__ring:nth-child(3) { animation: move3 2s linear infinite; bottom: 0.5em; } .slinky__ring:nth-child(4) { animation: move4 2s linear infinite; bottom: 0.75em; } .slinky__ring:nth-child(5) { animation: move5 2s linear infinite; bottom: 1em; } .slinky__ring:nth-child(6) { animation: move6 2s linear infinite; bottom: 1.25em; } .slinky__ring:nth-child(7) { animation: move7 2s linear infinite; bottom: 1.5em; } .slinky__ring:nth-child(8) { animation: move8 2s linear infinite; bottom: 1.75em; } .slinky__ring:nth-child(9) { animation: move9 2s linear infinite; bottom: 2em; } .slinky__ring:nth-child(10) { animation: move10 2s linear infinite; bottom: 2.25em; } .slinky__ring:nth-child(11) { animation: move11 2s linear infinite; bottom: 2.5em; } .slinky__ring:nth-child(12) { animation: move12 2s linear infinite; bottom: 2.75em; } .slinky__ring:nth-child(13) { animation: move13 2s linear infinite; bottom: 3em; } @keyframes camera { from { transform: translateX(0); } to { transform: translateX(-9.5em); } } @keyframes move13 { 0% { transform: translateY(0em) rotateZ(0) rotateX(0) translateX(-0.75em); } 35% { transform: translateY(0em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } 40%, 100% { transform: translateY(3em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } } @keyframes move12 { 0% { transform: translateY(0) rotateZ(0) rotateX(0) translateX(-0.75em); } 5% { transform: translateY(-0.25em) rotateZ(0) rotateX(0) translateX(-0.75em); } 40% { transform: translateY(-0.25em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } 45%, 100% { transform: translateY(2.5em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } } @keyframes move11 { 5% { transform: translateY(0) rotateZ(0) rotateX(0) translateX(-0.75em); } 10% { transform: translateY(-0.5em) rotateZ(0) rotateX(0) translateX(-0.75em); } 45% { transform: translateY(-0.5em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } 50%, 100% { transform: translateY(2em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } } @keyframes move10 { 10% { transform: translateY(0) rotateZ(0) rotateX(0) translateX(-0.75em); } 15% { transform: translateY(-0.75em) rotateZ(0) rotateX(0) translateX(-0.75em); } 50% { transform: translateY(-0.75em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } 55%, 100% { transform: translateY(1.5em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } } @keyframes move9 { 15% { transform: translateY(0) rotateZ(0) rotateX(0) translateX(-0.75em); } 20% { transform: translateY(-1em) rotateZ(0) rotateX(0) translateX(-0.75em); } 55% { transform: translateY(-1em) rotateZ(180deg) rotateX(180deg) translateX(-0.75em); } 60%, 100% { transform: translateY(1em) rotateZ(180deg) rotateX(180deg) tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0