svg+css实现可爱机器人动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现可爱机器人动画效果代码,点击触发。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: #DA542D; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } @keyframes floatRobot { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(0.5%) } } @keyframes shakeHead { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(10deg); } 30% { transform: rotate(6deg); } 42% { transform: rotate(8deg); } 65% { transform: rotate(3.5deg) } 80% { transform: rotate(5deg) } 95% { transform: rotate(-2deg) } } @keyframes shakeNeck { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(9deg); } 30% { transform: rotate(5deg); } 42% { transform: rotate(7.5deg); } 65% { transform: rotate(3deg) } 80% { transform: rotate(4.5deg) } 95% { transform: rotate(-1.5deg) } } @keyframes shakeBody { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(8deg); } 30% { transform: rotate(5.5deg); } 42% { transform: rotate(7deg); } 65% { transform: rotate(2.5deg) } 80% { transform: rotate(3.5deg) } 95% { transform: rotate(-1deg) } } @keyframes mergeCones { 16%, 90% { transform: translate(5%, 0.1%); } 100% { transform: translate(0, 0.1%); } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .cone:nth-child(2), .flame:nth-child(2) { transform: translate(-1.75%, 3.5%) } .cone:nth-child(3), .flame:nth-child(3) { transform: translate(-2.85%, 3.75%) } .cone:nth-child(4), .flame:nth-child(4) { transform: translate(-3.9%, 4%) } .cone:nth-child(5), .flame:nth-child(5) { transform: translate(-5%, 4.25%) } .cone:nth-child(6), .flame:nth-child(6) { transform: translate(1.75%, 3.5%) } .cone:nth-child(7), .flame:nth-child(7) { transform: translate(2.85%, 3.75%) } .cone:nth-child(8), .flame:nth-child(8) { transform: translate(3.9%, 4%) } .cone:nth-child(9), .flame:nth-child(9) { transform: translate(5%, 4.25%) } .cone:nth-child(2), .flame:nth-child(2) { transform: translate(-1.25%, 0.1%) } .cone:nth-child(3), .flame:nth-child(3) { transform: translate(-2.5%, 0.1%) } .cone:nth-child(4), .flame:nth-child(4) { transform: translate(-3.75%, 0.1%) } .cone:nth-child(5), .flame:nth-child(5) { transform: translate(-4.8%, 0.1%) } .cone:nth-child(6), .flame:nth-child(6) { transform: translate(1.3%, 0.1%) } .cone:nth-child(7), .flame:nth-child(7) { transform: translate(2.6%, 0.1%) } .cone:nth-child(8), .flame:nth-child(8) { transform: translate(3.85%, 0.1%) } .cone:nth-child(9), .flame:nth-child(9) { transform: translate(5.2%, 0.1%) } .cone, .flame { transform-origin: 50% 50%; transform: translate(0, 0.1%); } p { position: absolute; bottom: 1vmin; left: 50%; transform: translate(-50%, -50%); z-index: 1; color: white; text-transform: uppercase; font-family: 'Roboto Condensed', Roboto, Helvetica, Arial, sans-serif; font-size: 2.5vmin; } .animated p { display: none; } #smoke { opacity: 0; } #robot { animation: floatRobot 2s infinite; } .animated #head { transform-origin: 50% 50%; animation: shakeHead 2s cubic-bezier(.65,.07,.87,1.18) 2; } .animated #neck { transform-origin: 50% 50%; animation: shakeNeck 1.95s cubic-bezier(.7,.07,.87,1.20) 2; } .animated #body { transform-origin: 50% 50%; animation: shakeBody 1.9s cubic-bezier(.65,.1,.87,1.25) 2; } .animated .cone { animation: mergeCones 1.75s 2.2s cubic-bezier(.65,.1,.87,1.25) 1 forwards; } .animated .flame { animation: mergeCones 1.75s 2.2s cubic-bezier(.65,.1,.87,1.25) 1 forwards, fadeOut 0.85s 4.1s 1 forwards; } .animated #smoke { animation: fadeIn 1.25s 4.6s 1 forwards; } </style> </head> <body > <p>Click anywhere to blow out the candles</p> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve"> <svg fill="#fff" x="0" y="-500"> <path d="M273.1,595.4c0-1.6-0.6-3-1.7-4.1c-1.1-1.1-2.5-1.7-4.1-1.7h-30.9c-1.6,0-3,0.6-4.1,1.7c-1.1,1.1-1.7,2.5-1.7,4.1c0,1.5,0.6,2.9,1.7,4c1.1,1.1,2.5,1.7,4.1,1.7h30.9c3.6,0,6.9,0.7,10.2,2.2c3.2,1.4,6.1,3.5,8.5,6.2c4.3,4.8,6.5,10.4,6.5,16.8c0,3.5-0.7,6.8-2,9.8c-1.3,3.1-3.1,5.7-5.4,8c-2.3,2.3-5,4.1-8,5.4c-3.1,1.3-6.3,2-9.8,2h-30.9c-3.1,0-6-0.5-8.8-1.6c-2.7-1.1-5.2-2.5-7.4-4.4c-2.2-1.9-4.1-4.1-5.6-6.6c-1.5-2.6-2.5-5.3-3-8.4c-0.1-0.7-0.3-1.4-0.3-2.1c-0.1-0.7-0.1-1.4-0.1-2.2h19.4c0,1.6,0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7h30.9c1.6,0,3-0.6,4.1-1.7c1.1-1.1,1.7-2.5,1.7-4.1c0-1.6-0.6-2.9-1.7-4.1c-1.1-1.2-2.5-1.7-4.1-1.7h-30.9c-3.6,0-7-0.7-10.2-2.1c-3.2-1.4-6.1-3.5-8.5-6.2c-4.3-4.8-6.5-10.4-6.5-16.7c0-3.5,0.7-6.8,2-9.8c1.3-3.1,3.1-5.7,5.4-8c2.3-2.3,5-4.1,8-5.4c3.1-1.3,6.3-2,9.8-2h30.9c3.5,0,6.8,0.7,9.8,2c3.1,1.3,5.7,3.1,8,5.4c2.3,2.3,4.1,5,5.4,8c1.3,3.1,2,6.3,2,9.8H273.1z"/> <polygon points="400,570.2 358.9,614.6 358.9,651.5 339.5,651.5 339.5,614.6 298.2,570.2 324.6,570.2 349.1,596.7 373.6,570.2 "/> <path d="M461.2,570.2c3.5,0,6.8,0.7,9.8,2c3.1,1.3,5.7,3.1,8,5.4c2.3,2.3,4.1,5,5.4,8c1.3,3.1,2,6.3,2,9.8v30.9c0,3.5-0.7,6.7-2,9.8c-1.3,3.1-3.1,5.7-5.4,8c-2.3,2.3-5,4.1-8,5.4c-3.1,1.3-6.3,2-9.8,2h-56.1v-81.3H461.2z M424.5,632.1h36.7c1.6,0,3-0.6,4.1-1.7c1.1-1.1,1.7-2.5,1.7-4.1v-30.9c0-1.6-0.6-3-1.7-4.1c-1.1-1.1-2.5-1.7-4.1-1.7h-36.7V632.1z"/> <rect x="507.7" y="632.7" fill="#FAA441" width="18.9" height="18.8"/> <!-- <path fill="#fff6" d="M615.4,600 C615.4,600 615.4,650 615.4,650 615.4,670 580.4,690 580.4,690 580.4,690 595,700 595,700 595,700 635,680 635,630 635,630 635,600 635,600" /> --> <!-- <path fill="#fff6" d="M615.4,600 C615.4,600 615.4,620 615.4,620 615.4,660 622.4,670 600,670 600,670 555,670 555,670 555,670 555,688 555,688 580,688 580,688 600,688 635,688 635,678 635,650 635,600 635,600 635,600" /> --> <path id="smoke" fill="#fff6" d="M615.4,600 C615.4,600 615.4,620 615.4,620 615.4,660 622.4,670 600,670 600,670 555,670 555,670 525,670 506,740 508,750 510,740 525,688 555,688 580,688 580,688 600,688 635,688 635,678 635,650 635,600 635,600 635,600" /> <path d="M619.4,572.2c3.1,1.3,5.7,3.1,8,5.4c2.3,2.3,4.1,5,5.4,8c1.3,3.1,2,6.3,2,9.8v9.6h-19.4v-9.6c0-1.6-0.6-3-1.7-4.1c-1.1-1.1-2.5-1.7-4.1-1.7h-30.9c-1.6,0-3,0.6-4.1,1.7c-1.1,1.1-1.7,2.5-1.7,4.1v30.9c0,1.6,0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7h30.9c1.6,0,3-0.6,4.1-1.7c1.1-1.1,1.7-2.5,1.7-4.1v-9.6h19.4v9.6c0,3.5-0.7,6.7-2,9.8c-1.3,3.1-3.1,5.7-5.4,8c-2.3,2.3-5,4.1-8,5.4c-3.1,1.3-6.3,2-9.8,2h-30.9c-3.5,0-6.8-0.7-9.8-2c-3.1-1.3-5.7-3.1-8-5.4c-2.3-2.3-4.1-5-5.4-8c-1.3-3.1-2-6.3-2-9.8v-30.9c0-3.5,0.7-6.8,2-9.8c1.3-3.1,3.1-5.7,5.4-8c2.3-2.3,5-4.1,8-5.4c3.1-1.3,6.3-2,9.8-2h30.9C613.1,570.2,616.3,570.9,619.4,572.2"/> <path d="M712.9,595.4c0-1.6-0.6-3-1.7-4.1c-1.1-1.1-2.5-1.7-4.1-1.7h-30.9c-1.6,0-3,0.6-4.1,1.7c-1.1,1.1-1.7,2.5-1.7,4.1c0,1.5,0.6,2.9,1.7,4c1.1,1.1,2.5,1.7,4.1,1.7h30.9c3.6,0,6.9,0.7,10.2,2.2c3.2,1.4,6.1,3.5,8.5,6.2c4.3,4.8,6.5,10.4,6.5,16.8c0,3.5-0.7,6.8-2,9.8c-1.3,3.1-3.1,5.7-5.4,8c-2.3,2.3-5,4.1-8,5.4c-3.1,1.3-6.3,2-9.8,2h-30.9c-3.1,0-6-0.5-8.8-1.6c-2.7-1.1-5.2-2.5-7.4-4.4c-2.2-1.9-4.1-4.1-5.6-6.6c-1.5-2.6-2.5-5.3-3-8.4c-0.1-0.7-0.3-1.4-0.3-2.1c-0.1-0.7-0.1-1.4-0.1-2.2h19.4c0,1.6,0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7h30.9c1.6,0,3-0.6,4.1-1.7c1.1-1.1,1.7-2.5,1.7-4.1c0-1.6-0.6-2.9-1.7-4.1c-1.1-1.2-2.5-1.7-4.1-1.7h-30.9c-3.6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0