js+css实现一个机器狗跟随音乐跳舞动画代码
代码语言:html
所属分类:动画
代码描述:js+css实现一个机器狗跟随音乐跳舞动画代码
代码标签: js css 机器狗 跟随 音乐 跳舞 动画 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { align-items: center; display: flex; height: 100vh; justify-content: center; margin: 0; background: linear-gradient( 0deg, rgba(158, 217, 198, 1) 0%, rgba(158, 217, 198, 1) 40%, rgba(199, 255, 221, 1) 40%, rgba(199, 255, 221, 1) 100% ); } body[onload] > *, body[onload] > * *, body.play-animation > *, body.play-animation > * * { animation-play-state: running; } body[onload] audio { display: none; } .container { position: relative; font-size: clamp(8px, 2vmin, 17px); } .arm-wrapper, .arm-2, .spot-body, .details, .top-leg-1, .bottom-leg-1, .top-leg-2, .bottom-leg-2, .top-leg-3, .bottom-leg-3, .top-leg-4, .bottom-leg-4, .shadow { animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: paused; } .arm-wrapper { animation-name: moveBody; } .arm-wrapper > * { position: absolute; } .spot-arm { background: #262626; height: 2.3em; } .arm-base { border-radius: 15% 0% 58% 0% / 15% 0% 58% 0%; left: 14em; top: -1.4em; transform: rotate(1deg); width: 10em; } .arm-1 { border-radius: 0% 58% 0% 58% / 0% 58% 0% 58%; left: 13.2em; top: -3.7em; transform: rotate(11deg); width: 11em; } .arm-2 { animation-name: moveArm3; border-radius: 58% 0% 0% 0% / 58% 0% 0% 0%; left: 13.4em; top: -6em; width: 13em; } @keyframes moveArm3 { 0%, 100% { top: -7em; transform: rotate(-10deg); } 10%, 25% { top: -6em; transform: rotate(1deg); } 35%, 50% { top: -7em; transform: rotate(-10deg); } 60%, 75% { top: -6em; transform: rotate(1deg); } 85%, 95% { top: -7em; transform: rotate(-10deg); } } .circle { background: grey; border-radius: 50%; height: 1.9em; left: 10em; position: absolute; top: 2px; width: 1.9em; z-index: 2; } .arm-top { border-radius: 1em; height: 4em; left: 12em; position: absolute; top: -0.8em; transform: rotate(-15deg) skew(25deg) translate(-1em, 0.3em); width: 4em; } .spot-body { background: #ffdb0d; border-radius: 2em 2em 5em 9em / 3em 2em 11em 14em; border: 5px solid #262626; height: 5em; position: static; width: 25em; transform: rotate(1deg); animation-name: moveBody; } .container > *:not(.spot-body) { position: absolute; } .top-legs { border-radius: 1em 1em 2em 7em / 3em 2em 11em 14em; border-style: solid; border-width: 2px; height: 13em; width: 2.2em; } .bottom-legs { border-radius: 2em 2em 2em 2em / 2em 2em 10em 10em; border: 2px solid #262626; color: white; height: 11em; width: 1.2em; z-index: -2; } .top-leg-1 { animation-name: moveTopLeg1; background: #ffdb0d; border-color: #ffdb0d; left: -2em; top: 0; transform-box: fill-box; transform-origin: center center; transform: rotate(50deg); z-index: 2; } @keyframes moveTopLeg1 { 0%, 100% { left: -0.5em; top: -1em; transform: rotate(33deg); } 10%, 25% { left: -2em; top: -1em; transform: rotate(59deg); } 35%, 50% { left: -3em; top: -6em; transform: rotate(90deg); } 60%, 75% { left: -1em; top: 0.5em; transform: rotate(40deg); } 85%, 95% { left: -0.5em; top: -1em; transform: rotate(33deg); } } .bottom-leg-1 { animation-name: moveBottomLeg1; background: #262626; left: -2em; top: 9em; transform-box: fill-box; transform-origin: center center; transform: rotate(-47deg); z-index: 1; } @keyframes moveBottomLeg1 { 0%, 100% { left: 0em; top: 9em; transform: rotate(-33deg); } 10%, 25% { left: -5em; top: 8em; transform: rotate(-16deg); } 35%, 50% { left: -4em; top: -1em; transform: rotate(-50deg); } 60%, 75% { left: 1em; top: 9em; transform: rotate(-62deg); } 85%, 95% { left: 0em; top: 9em; transform: rotate(-33deg); } } .top-leg-2 { animation-name: moveTopLeg2; background: #262626; left: -1em; top: 1em; transform: rotate(51deg); z-index: -1; } @keyframes moveTopLeg2 { 0%, 100% { left: -2em; top: -1em; transform: rotate(51deg); } 10%, 25% { left: 1em; top: 2.2em; transform: rotate(36deg); } 35%, 50% { left: -1em; top: -1em; transform: rotate(44deg); } 60%, 75% { left: -1em; top: -2.8em; transform: rotate(80deg); } 85%, 95% { left: -2em; top: -1em; transform: rotate(51deg); } } .bottom-leg-2 { animation-name: moveBottomLeg2; background: #262626; left: -1em; top: 8em; transform: rotate(-46deg); } @keyframes moveBottomLeg2 { 0%, 100% { left: 0em; top: 4.5em; transform: rotate(-69deg); } 10%, 25% { left: 2.5em; top: 9em; transform: rotate(-50deg); } 35%, 50% { left: -1.2em; top: 6.5em; transform: rotate(-32deg); } 60%, 75% { left: -4.5em; top: 3.5em; transform: rotate(-5deg); } 85%, 95% { left: -0.5em; top: 4.2em; transform: rotate(-69deg); } } .top-leg-3 { animation-name: moveTopLeg3; background: #262626; left: 16em; top: 1.5em; transform: rotate(35deg); z-index: -1; } @keyframes moveTopLeg3 { 0%, 100% { left: 17em; top: 1em; transform: rotate(23deg); } 10%, 25% { left: 16em; top: 2em; transform: rotate(55deg); } 35%, 50% { left: 17em; top: -2.9em; transform: rotate(50deg); } 60%, 75% { left: 19em; top: 2em; transform: rotate(14deg); } 85%, 95% { left: 17em; top: 1em; transform: rotate(23deg); } } .bottom-leg-3 { animation-name: moveBottomLeg3; background: #262626; lef.........完整代码请登录后点击上方下载按钮下载查看
网友评论0