svg+css实现golang吉祥物布局动画
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { -webkit-box-align: center; align-items: center; background-color: #D5C4FF; display: -webkit-box; display: flex; height: 100vh; -webkit-box-pack: center; justify-content: center; } .gopher { height: 20rem; width: 20rem; } .gopher-animation, .left-arm, .right-arm, .right-foot, .left-foot, .belly, .shadow, .left-eye, .right-eye, .mouth, .tongue { -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .left-eye, .right-eye { -webkit-animation-name: blink; animation-name: blink; } @-webkit-keyframes blink { 0%, 18%, 100% { visibility: hidden; } 15% { visibility: visible; } } @keyframes blink { 0%, 18%, 100% { visibility: hidden; } 15% { visibility: visible; } } .mouth, .tongue { -webkit-animation-name: shout; animation-name: shout; } @-webkit-keyframes shout { 0%, 18%, 100% { visibility: hidden; } 10% { visibility: visible; } } @keyframes shout { 0%, 18%, 100% { visibility: hidden; } 10% { visibility: visible; } } .gopher-animation { -webkit-animation-name: jump; animation-name: jump; } @-webkit-keyframes jump { 0%, 15%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(5%); transform: translateY(5%); } 12% { -webkit-transform: translateY(-30%); transform: translateY(-30%); } } @keyframes jump { 0%, 15%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(5%); transform: translateY(5%); } 12% { -webkit-transform: translateY(-30%); transform: translateY(-30%); } } .right-arm { -webkit-animation-name: rotateRightArm; animation-name: rotateRightArm; transform-box: fill-box; } @-webkit-keyframes rotateRightArm { 0%, 6%, 18%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 13% { -webkit-transform: rotate(-120deg) translateX(-50%); transform: rotate(-120deg) translateX(-50%); } } @keyframes rotateRightArm { 0%, 6%, 18%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 13% { -webkit-transform: rotate(-120deg) translateX(-50%); transform: rotate(-120deg) translateX(-50%); } } .left-arm { -webkit-animation-name: rotateLeftArm; animation-name: rotateLeftArm; transform-box: fill-box; -webkit-transform-origin: top right; transform-origin: top right; } @-webkit-keyframes rotateLeftArm { 0%, 6%, 18%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 13% { -webkit-transform: rotate(120deg) translateX(50%); transform: rotate(120deg) translateX(50%); } } @keyframes rotateLeftArm { 0%, 6%, 18%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 13% { -webkit-transform: rotate(120deg) translateX(50%); transform: rotate(120deg) translateX(50%); } } .right-foot { -webkit-animation-name: bendRightFoot; animation-name: bendRightFoot; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes bendRightFoot { 0%, 15%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(-3%); transform: translateY(-3%); } 12% { -webkit-transform: translateY(5%) rotate(-5deg); transform: translateY(5%) rotate(-5deg); } } @keyframes bendRightFoot { 0%, 15%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(-3%); transform: translateY(-3%); } 12% { -webkit-transform: translateY(5%) rotate(-5deg); transform: translateY(5%) rotate(-5deg); } } .left-foot { -webkit-animation-name: bendLeftFoot; animation-name: bendLeftFoot; -webkit-transform-origin: top right; transform-origin: top right; } @-webkit-keyframes bendLeftFoot { 0%, 15%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(-3%); transform: translateY(-3%); } 12% { -webkit-transform: translateY(5%) rotate(5deg); transform: translateY(5%) rotate(5deg); } } @keyframes bendLeftFoot { 0%, 15%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(-3%); transform: translateY(-3%); } 12% { -webkit-transform: translateY(5%) rotate(5deg); transform: translateY(5%) rotate(5deg); } } .belly { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes bounce { 0%, 10%, 15%, 18%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(1%); transform: translateY(1%); } 12% { -webkit-transform: translateY(-2%); transform: translateY(-2%); } 16% { -webkit-transform: translateY(1%); transform: translateY(1%); } } @keyframes bounce { 0%, 10%, 15%, 18%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 6% { -webkit-transform: translateY(1%); transform: translateY(1%); } 12% { -webkit-transform: translateY(-2%); transform: translateY(-2%); } 16% { -webkit-transform: translateY(1%); transform: translateY(1%); } } .shadow { -webkit-animation-name: scaleShadow; animation-name: scaleShadow; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scaleX(1); transform: scaleX(1); } @-webkit-keyframes scaleShadow { 0%, 8%, 15%, 100% { -webkit-transform: scaleX(1); transform: scaleX(1) } 12% { -webkit-transform: scaleX(0.65); transform: scaleX(0.65) } } @keyframes scaleShadow { 0%, 8%, 15%, 100% { -webkit-transform: scaleX(1); transform: scaleX(1) } 12% { -webkit-transform: scaleX(0.65); transform: scaleX(0.65) } } </style> </head> <body translate="no"> <svg class="gopher" viewBox="0 -150 1200 1700" fill="none" xmlns="http://www.w3.org/2000/svg"> <ellipse class="shadow" cx="626" cy="1460" rx="280" ry="50" fill="#9B80B4" /> <g class="gopher-animation"> <path fill-rule="evenodd" clip-rule="evenodd" d="M336.843 527.661C315.681 486.87 305.448 404.203 336.843 387.475C368.239 370.747 422.722 400.089 443.884 440.879C465.047 481.669 464.797 523.3 433.402 540.028C402.007 556.756 358.006 568.451 336.843 527.661Z" fill="#A0C6E0" stroke="#675243" stroke-width="5" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M360.931 498.7C348.903 477.633 343.087 434.936 360.931 426.296C378.774 417.657 409.739 432.811 421.767 453.879C433.795 474.946 433.653 496.448 415.809 505.087C397.966 513.727 372.958 519.768 360.931 498.7Z" fill="#C2DFE7" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M769.62 479.414C795.431 441.472 862.912 393.883 892.115 414.285C921.318 434.688 920.991 497.214 895.18 535.156C869.369 573.098 832.877 592.215 803.674 571.812C774.471 551.409 743.809 517.356 769.62 479.414Z" fill="#A0C6E0" stroke="#675243" stroke-width="5" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M810.602 477.327C824.879 457.169 862.........完整代码请登录后点击上方下载按钮下载查看
网友评论0