css实现盒子组装成的小狗跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现盒子组装成的小狗跳动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html,body { height: 100%; width: 100%; overflow: hidden } html { box-sizing: border-box } *,*:before,*:after { box-sizing: inherit } body { position: relative; background: #f0f0f0; padding: 0; margin: 0 } .container { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 600px; height: 420px } * { position: absolute } * *:before,* *:after { content: ""; position: absolute } .box { background-color: #d1585d; width: 50%; height: 45%; left: 25%; bottom: 0; border-radius: 20px; transform-origin: center bottom; -webkit-animation: bigBox 8s linear infinite; animation: bigBox 8s linear infinite } .box:before { background-color: #f79568; width: 70%; height: 100%; bottom: 0; border-radius: 20px } .box:after { background-color: #ffbd31; height: 100%; width: 11%; right: 10% } .box .sign { width: 36px; height: 36px; border-radius: 6px; border: 3px solid #d1585d; left: 150px; top: 10% } .box .sign:after { width: 3px; height: 20px; left: 13px; top: 6px; background-color: #d1585d } .box .sign:before { width: 9px; height: 9px; left: 10px; top: 6px; border: 3px solid #d1585d; border-left: 0; border-bottom: 0; transform: rotate(-45deg) } .dog { bottom: 45%; height: 45%; width: 45%; -webkit-animation: dog-bounce 8s linear infinite; animation: dog-bounce 8s linear infinite; transform-origin: center bottom } .dog-group { width: 100%; height: 100%; top: 0; left: 0; -webkit-animation: dog-jump 8s linear infinite; animation: dog-jump 8s linear infinite; transform-origin: center bottom } .body-group { z-index: 2; width: 52%; height: 38%; bottom: 0; left: 25% } .body-group .dog-box { width: 100%; height: 100%; border-radius: 0 7px 7px; overflow: hidden; z-index: 3; background: #f79568; background: linear-gradient(90deg,#f79568 0,#f79568 67%,#d1585d 67%,#d1585d 100%) } .body-group .dog-box .dog-box-sign { width: 30px; height: 30px; border-radius: 6px; border: 3px solid #d1585d; left: 35%; top: 15% } .body-group .dog-box .dog-box-sign:after { width: 70%; height: 3px; border-radius: 10px; background-color: #d1585d; left: 15%; top: 5px; box-shadow: 0 6px #d1585d } .body-group .dog-box .dog-box-sign:before { width: 45%; height: 3px; border-radius: 10px; background-color: #d1585d; left: 39%; top: 17px } .body-group .dog-box .bottom-shadow { width: 100%; height: 20px; background-color: #a53942; bottom: -13px; transform: rotate(-2deg); -webkit-animation: shadows 8s linear infinite; animation: shadows 8s linear infinite } .body-group .dog-box .top-left-shadow { height: 40px; width: 60px; background-color: #a53942; transform: rotate(-15deg); top: -32px; left: -10px; -webkit-animation: shadows 8s linear infinite; animation: shadows 8s linear infinite } .body-group .dog-shape { border-radius: 50%; background-color: #39cede; width: 50px; height: 50px; right: 18%; top: -40%; z-index: 2; box-shadow: 6px 10px 0 #a53942; -webkit-animation: blue-shape 8s linear infinite; animation: blue-shape 8s linear infinite; transform-origin: center bottom } .body-group .tail-group { right: 0; top: -65%; height: 70px; width: 24px; z-index: 1; transform: rotate(25deg); -webkit-animation: tailGroup 8s linear infinite; animation: tailGroup 8s linear infinite; transform-origin: center } .body-group .tail-group .tail { bottom: 0; background-color: #ff4a50; height: 22px; width: 22px; border-radius: 0 0 20px 20px; z-index: 1; -webkit-animation: tail 8s linear infinite; animation: tail 8s linear infinite; transform-origin: center center } .body-group .tail-group .tail .tail { bottom: 40% } .body-group .tail-group .tail.last { border-radius: 20px } .head-group { bottom: 38%; width: 45%; height: 38%; left: 10%; -webkit-animation: dog-head 8s linear infinite; animation: dog-head 8s linear infinite; transform-origin: center bottom } .head-group .head { width: 100%; height: 100%; border-radius: 0 0 3px 3px; overflow: hidden; background: #f79568; background: linear-gradient(90deg,#f79568 0,#f79568 67%,#d1585d 67%,#d1585d 100%) } .head-group .head:after { background-color: #a53942; width: 50px; height: 50px; border-radius: 50%; right: -25px; bottom: -25px } .head-group .ear { height: 30px; width: 50%; bottom: 100%; transform: perspective(3000px) } .head-group .ear.right { right: -20px } .head-group .ear .ear-container { width: 95%; height: 100%; left: -9px; transform-style: preserve-3d; transform-origin: center bottom; transform: rotateY(45deg) } .head-group .ear .ear-left,.head-group .ear .ear-right { background-color: #cb444a; height: 100%; width: 100%; transform-style: preserve-3d; border-radius: 4px 4px 0 0; transform-origin: center bottom } .head-group .ear .ear-left { transform: rotateX(50deg); -webkit-animation: earLeft 8s linear infinite; animation: earLeft 8s linear infinite } .head-group .ear .ear-right { transform: rotateX(-50deg); -webkit-animation: earRight 8s linear infinite; animation: earRight 8s linear infinite } .head-group .face { width: 67%; height: 100% } .head-group .face .muzzle { width: 34px; height: 34px; border-radius: 50%; background-color: #d1585d; left: 29%; bottom: 8%; z-index: 2 } .head-group .face .eyes { width: 100%; height: 50%; top: 17%; z-index: 1 } .head-group .face .eyes .eye-left,.head-group .face .eyes .eye-right { width: 32px; height: 32px; border-radius: 50%; background-color: #fff; bottom: 0; transform-origin: center top; -webkit-animation: eyeWink 8s linear infinite; animation: eyeWink 8s linear infinite } .head-group .face .eyes .eye-left .pupil,.head-group .face .eyes .eye-right .pupil { background-color: #421163; border-radius: 50%; width: 76%; height: 76%; top: 12%; left: 14%; -webkit-animation: eyeMove 8s linear infinite; animation: eyeMove 8s linear infinite } .head-group .face .eyes .eye-left .pupil:after,.head-group .face .eyes .eye-right .pupil:after { background-color: #fff; border-radius: 50%; width: 10px; height: 10px; top: 3px; left: -1px; transform-origin: center bottom; -webkit-animation: eyeWink2 8s linear infinite; animation: eyeWink2 8s linear infinite } .head-group .face .eyes .eye-left { left: 4px } .head-group .face .eyes .eye-right { right: 4px } .head-group .face .nose { background-color: #421163; width: 12px; height: 8px; left: 9px; top: 6px; border-radius: 40%; -webkit-animation: nose 8s linear infinite; animation: nose 8s linear infinite } .head-group .face .nose:after { width: 4px; height: 6px; background-color: #421163; left: 4px; top: 8px } .head-group .face .mouth-close { width: 100%; height: 8px; top: 12px; -webkit-animation: mouthClose 8s linear infinite; animation: mouthClose 8s linear infinite } .head-group .face .mouth-close:after,.head-group .face .mouth-close:before { width: 12px; height: 8px; border: 3px solid #421163; border-radius: 0 0 8px 8px; border-top: 0; top: 4px; left: 4px } .head-group .face .mouth-close:before { left: 14px } .head-group .face .mouth-barks { background-color: #421163; width: 20px; height: 20px; bottom: 2px; left: 6px; border-radius: 50%; overflow: hidden; opacity: 0; -webkit-animation: mouthBarks 8s linear infinite; animation: mouthBarks 8s linear infinite } .head-group .face .mouth-barks:after { width: 80%; height: 80%; background-color: #ff4a50; left: 40%; top: 40%; border-radius: 50% } .head-group .face .mouth-open { opacity: 0; background-color: #421163; width: 24px; height: 12px; bottom: 3px; left: 4px; border-radius: 0 0 22px 22px; -webkit-animation: mouthOpen 8s linear infinite; animation: mouthOpen 8s linear infinite } .head-group .face .mouth-open .teeth { width: 0; height: 0; left: 3px; top: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid #fff } .head-group .face .mouth-open .teeth:after { width: 0; height: 0; left: 9px; top: -5px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid #fff } .head-group .face .mouth-open .tongue-open { background-color: #ff4a50; width: 12px; height: 9px; left: 6px; top: 3px; border-radius: 40%; -webkit-animation: tongue 8s linear infinite; animation: tongue 8s linear infinite; transform-origin: center top } .tongue-open { z-index: 99; background-color: #ff4a50; width: 12px; height: 9px; left: 61px; top: 100px; border-radius: 40%; -webkit-animation: tongue 8s linear infinite; animation: tongue 8s linear infinite; transform-origin: center top } .plant-group { width: 32%; height: 45%; bottom: 0; right: 0 } .plant-group:before { background-color: #a53942; left: 13%; bottom: 30%; height: 60px; width: 16px } .plant-group .pot { background-color: #a53942; left: 0; bottom: 0; height: 60px; width: 60px; z-index: 2 } .plant-group .pot:after { background-color: #ff4a50; left: 0; bottom: 0; height: 100%; width: 200%; border-radius: 0 0 120px 120px } .plant-group .plant { bottom: 60px; left: 0; height: 50px; width: 120px } .plant-group .plant .stem { width: 8px; height: 110%; background-color: #421163; left: 56px; top: -4px } .plant-group .plant .leaf { background-color: #421163; width: 6px; height: 16px; left: -6px; border-radius: 50px } .plant-group .plant .leaf:after { background-color: #39cede; width: 20px; height: 38px; border-radius: 50%; left: -7px; bottom: 70% } .plant-group .plant .leaf:nth-of-type(1),.plant-group .plant .leaf:nth-of-type(2) { transform: rotate(-45deg) } .plant-group .plant .leaf:nth-of-type(4),.plant-group .plant .leaf:nth-of-type(5) { transform: rotate(45deg); left: 8px } .plant-group .plant .leaf:nth-of-type(1),.plant-group .plant .leaf:nth-of-type(5) { bottom: -3px } .plant-group .plant .leaf:nth-of-type(3) { top: -2px; left: 1px } .plant-group .plant .leaf:nth-of-type(2),.plant-group .plant .leaf:nth-of-type(4) { bottom: 25px } .shapes { width: 50%; height: 45%; bottom: 0; left: 0 } .shapes:before { background-color: #a53942; width: 52%; height: 50%; bottom: 0; right: -1px; border-radius: 0 30px 0 0; transform: skewX(5deg) } .shapes .red-shape { background-color: #ff4a50; right: 0; bottom: 0; height: 120px; width: 120px; border-radius: 100% } .shapes .blue-shape { left: 24%; bottom: 0; width: 120px; height: 50px; background-color: #39cede; border-radius: 50px } .shapes .yellow-shape { left: 35%; bottom: 77px; width: 120px; height: 40px; background-color: #ffbd31; border-radius: 50px; transform: rotate(-45deg) } @-webkit-keyframes bigBox { 6.3%,11.6%,14.4%,16%,48%,52.4%,55.6%,57.2%,62.4%,67.2%,70.8%,72.4% { transform: scaleX(1) scaleY(1) } 8.8%,50.4%,65.6% { transform: scaleX(1.02) scaleY(0.98) } 14.8%,56%,71.2% { transform: scaleX(1.05) scaleY(0.95) } } @keyframes bigBox { 6.3%,11.6%,14.4%,16%,48%,52.4%,55.6%,57.2%,62.4%,67.2%,70.8%,72.4% { transform: scaleX(1) scaleY(1) } 8.8%,50.4%,65.6% { transform: scaleX(1.02) scaleY(0.98) } 14.8%,56%,71.2% { transform: scaleX(1.05) scaleY(0.95) } } @-webkit-keyframes dog-bounce { 6.3%,11.2%,14.4%,16%,48%,52.4%,55.6%,57.2%,62.8%,67.2%,70.8%,72.4% { transform: scaleX(1) scaleY(1) } 8.8%,50.4%,65.6% { transform: scaleX(1.15) scaleY(0.85) translateY(5px) } 14.8%,56%,71.2% { transform: scaleX(1.1) scaleY(0.9) translateY(10px) } 16.4%,72.8% { transform: scaleX(0.95) scaleY(1.05) } 18.4%,22%,26%,30%,34%,74.4%,78.4%,82.4%,86.4%,90.4% { transform: scaleX(1.04) scaleY(0.96) } 20%,24%,28%,32%,36%,40%,76.4%,80.4%,84.4%,88.4%,92.4%,96.4% { transform: scaleX(1) scaleY(1) } 38%,94.4% { transform: scaleX(1.08) scaleY(0.92) } } @keyframes dog-bounce { 6.3%,11.2%,14.4%,16%,48%,52.4%,55.6%,57.2%,62.8%,67.2%,70.8%,72.4% { transform: scaleX(1) scaleY(1) } 8.8%,50.4%,65.6% { transform: scaleX(1.15) scaleY(0.85) translateY(5px) } 14.8%,56%,71.2% { transform: scaleX(1.1) scaleY(0.9) translateY(10px) } 16.4%,72.8% { transform: scaleX(0.95) scaleY(1.05) } 18.4%,22%,26%,30%,34%,74.4%,78.4%,82.4%,86.4%,90.4% { transform: scaleX(1.04) scaleY(0.96) } 20%,24%,28%,32%,36%,40%,76.4%,80.4%,84.4%,88.4%,92.4%,96.4% { transform: scaleX(1) scaleY(1) } 38%,94.4% { transform: scaleX(1.08) scaleY(0.92) } } @-webkit-keyframes dog-jump { 10.4%,71.2% { transform: translateX(0px) translateY(0px) } 10.8%,70.4% { transform: translateY(-15px) } 11.2%,69.6% { transform: translateX(-4px) translateY(-22px) } 11.6%,69.2% { transform: translateX(-8px) translateY(-28px) } 12%,68.8% { transform: translateX(-12px) translateY(-30px) } 12.4%,68.4% { transform: translateX(-16px) translateY(-28px) } 12.8%,68% { transform: translateX(-20px) translateY(-25px) } 13.2%,67.6% { transform: translateX(-24px) translateY(-20px) } 13.6%,67.2% { transform: translateX(-28px) translateY(-10px) } 14.8%,51.6%,55.2%,66.8% { transform: translateX(-32px) translateY(0px) } 52%,53.6% { transform: translateX(-32px) translateY(-10px) } } @keyframes dog-jump { 10.4%,71.2% { transform: translateX(0px) translateY(0px) } 10.8%,70.4% { transform: translateY(-15px) } 11.2%,69.6% { transform: translateX(-4px) translateY(-22px) } 11.6%,69.2% { transform: translateX(-8px) translateY(-28px) } 12%,68.8% { transform: translateX(-12px) translateY(-30px) } 12.4%,68.4% { transform: translateX(-16px) trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0