svg+css实现一个格鲁特花盆中招手动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现一个格鲁特花盆中招手动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> svg { width: 350px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; } #groot { opacity: 0; animation: 1.5s animation-groot-show forwards; } @keyframes animation-groot-show { 0% { opacity: 0; transform: translate3d(0, -100px, 0); } 100% { opacity: 1; transform: translate3d(0, 0px, 0); } } #eyeLeft { animation: 1.5s linear animation-eye infinite alternate; } #eyeRight { animation: 1.5s linear animation-eye infinite alternate; } @keyframes animation-eye { 0% { transform: translate3d(0, -2px, 0); } 100% { transform: translate3d(0, 1px, 0); } } #mouth { animation: 1.5s animation-mouth linear infinite alternate; } @keyframes animation-mouth { 0% { transform: translate3d(0, 2px, 0); } 100% { transform: translate3d(0, 5px, 0); } } #head { animation: 1.5s linear infinite alternate animation-head; } @keyframes animation-head { 0% { transform: translate3d(0, -1px, 0); } 100% { transform: translate3d(0, 1px, 0); } } #armLeft { transform-origin: 45% 50%; animation: 1.3s linear infinite alternate animation-armLeft; } @keyframes animation-armLeft { 0% { transform: rotate(-10deg); } 100% { transform: rotate(5deg); } } #armRight { transform-origin: 48% 48%; animation: 1.3s linear infinite alternate animation-armRight; } @keyframes animation-armRight { 0% { transform: rotate(-8deg); } 100% { transform: rotate(3deg); } } #leaf4 { animation: 1.5s linear infinite alternate animation-left-hand; } @keyframes animation-left-hand { 0% { transform: translatex(0) translatey(0); } 100% { transform: translatex(-1px) translatey(2px); } } #leaf1 { animation: 1.5s infinite alternate animation-left; } #leaf2 { animation: 1.5s infinite alternate animation-left; animation-delay: 1s; } #leaf3 { animation: 1.5s infinite alternate animation-left; animation-delay: .5s; } @keyframes animation-left { 0% { transform: translatey(0); } 100% { transform: translatey(3px); } } #leaf5 { animation: 1.5s linear infinite alternate animation-leaf-body-right; } @keyframes animation-leaf-body-right { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-3px, 0, 0); } } #leaf6 { animation: 1.5s linear infinite alternate animation-leaf-body-left; } #leaf7 { animation: 1.5s linear infinite alternate animation-leaf-body-left; animation-delay: 1s; } @keyframes animation-leaf-body-left { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(4px, 0, 0); } } </style> </head> <body> <?xml version="1.0" encoding="utf-8" ?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"> <style type="text/css"> .st0{fill:#39B54A;stroke:#42210B;stroke-width:2;stroke-miterlimit:10;} .st1{fill:#39B54A;stroke:#603813;stroke-width:2;stroke-miterlimit:10;} .st2{fill:#BB7F52;stroke:#42210B;stroke-width:2;stroke-miterlimit:10;} .st3{fill:#BB7F52;} .st4{fill:#FFFFFF;stroke:#603813;stroke-width:2;stroke-miterlimit:10;} .st5{fill:#42210B;stroke:#42210B;stroke-width:2;stroke-miterlimit:10;} .st6{fill:#FF7BAC;stroke:#42210B;stroke-width:2;stroke-miterlimit:10;} .st7{opacity:0.33;} .st8{fill:#FFE6F0;} </style> <g id="groot"> <g id="body"> <g id="leaf7"> <path id="XMLID_27_" class="st0" d="M133.4,190.1l-6,1.7c0,0-9.6-10.6-18.6,4.7c0,0,15.6,7.8,18.6-4.7" /> <path id="XMLID_29_" class="st0" d="M127.4,191.8" /> <line id="XMLID_31_" class="st0" x1="114.1" y1="195" x2="122.8" y2="192.9" /> </g> <g id="leaf6"> <path id="XMLID_26_" class="st0" d="M134.4,169.7l-5.1,1.8c0,0-7.2-7.4-12.9,5.4c0,0,10.3,3.6,12.9-5.4" /> <path id="XMLID_24_" class="st0" d="M129.3,171.5" /> <line id="XMLID_28_" class="st0" x1="120.3" y1="175.1" x2="125.5" y2="172.4" /> </g> <g id="leaf5"> <path id="XMLID_22_" class="st1" d="M158,168.5l1.2-0.2c0,0,2.8-11.6,16.9-4.1c0,0-7.2,10.1-16.9,4.1" /> <path id="XMLID_20_" class="st1" d="M159.2,168.3" /> <path id="XMLID_23_" class="st1" d="M159.2,168.3" /> <line id="XMLID_25_" class="st1" x1="162.9" y1="166.9" x2="171" y2="165.2" /> </g> <path id="XMLID_5_" class="st2" d="M126.4,130.4c0,0,14.7,31.6,4.2,78.6H169c0,0-17.9-44.2-13.9-77.4L126.4,130.4z" /> </g> <g id="armRight"> <g id="leaf4"> <path id="XMLID_17_" class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0