gsap模仿海底鱼儿游动动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap模仿海底鱼儿游动动画效果代码,包含小鱼儿和大鱼
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .mid_blue_stroke_100_3pt_bubble{fill:none;stroke:#00BCB2;stroke-width:3;stroke-miterlimit:10;} .dark_blue_fill_100{fill:#004247;} .dark_blue_fill_85{fill:#265E63;} .dark_blue_fill_75{fill:#407175;} .dark_blue_fill_50{fill:#80A0A3;} .white_fill{fill:#FFFFFF;} .dark_blue_stroke_100_2pt{fill:none;stroke:#004247;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .dark_blue_stroke_100_6pt{fill:none;stroke:#004247;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .dark_blue_stroke_100_30pt_legs{fill:none;stroke:#004247;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .dark_blue_stroke_50_2pt{fill:none;stroke:#80A0A3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .mid_blue_fill_100_50_opacity{opacity:0.5;fill:#00BCB2;} .red_fill_100{fill:#FF7070;} .st0{fill:#598488;} .st1{fill:#FFB7B7;mix-blend-mode:lighten;} .st2{fill:#FF5757;mix-blend-mode:overlay;} .st3{fill:none;stroke:#80A0A3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st4{fill:none;stroke:#004247;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .fillnone{fill:none;} body { margin: 0; padding: 0; height: 100vh; background-color: #fff2ca; } svg { position: absolute; min-width: 100vw; max-height: 100vh; margin: 0 auto; top: 50%; transform: translateY(-50%); } /* original css animations */ /*#squish-fish { transform-origin: 376.8333px 290.9662px; animation-name: bobbin-up-down; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .red_fill_100{ animation-name: color-change; animation-duration: 6s; animation-iteration-count: infinite; } @keyframes bobbin-up-down { 0%{ transform: scaleY(1) translateY(0px); } 25%{ transform: scaleY(0.9) translateY(50px); } 100%{ transform: scaleY(1) translateY(0px); } } @keyframes color-change{ 0%, 100%{ fill:#FF7070; } 50%{ fill:#4c1fdb; } } */ </style> </head> <body > <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 25.4.1, 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 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve"> <path id="mpath" class="fillnone" d="M1076.93,380.7c0,0,97.31-0.22,110.78,0 c254.1,4.14,468.75,47.57,542.97,127.35c18.03,19.39,27.78,40.91,27.78,64.53c0,210.24-220.28,333.6-369.17,384.13 C963.9,1101.07,900.81,378.68,570.83,378.68h-0.01H150.82C430.17,377.73,1076.93,380.7,1076.93,380.7"/> <g id="background-seaweed"> <g id="seaweed01"> <path class="dark_blue_fill_100" d="M450.21,883.09c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V883.09z"/> <path class="dark_blue_fill_100" d="M450.21,706.63c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V706.63z"/> </g> <g id="seaweed02"> <path class="dark_blue_fill_100" d="M234.48,794.86c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V794.86z"/> <path class="dark_blue_fill_100" d="M234.48,971.32c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V971.32z"/> <path class="dark_blue_fill_100" d="M234.48,618.4c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V618.4z"/> </g> <g id="seaweed03"> <path class="dark_blue_fill_100" d="M1619.02,618.49c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V618.49z"/> <path class="dark_blue_fill_100" d="M1619.02,442.03c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V442.03z"/> <path class="dark_blue_fill_100" d="M1619.02,265.57c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V265.57z"/> </g> </g> <g id="bubbles"> <circle id="bubble01" class="mid_blue_stroke_100_3pt_bubble" cx="1330.01" cy="201" r="31.28"/> <circle id="bubble02" class="mid_blue_stroke_100_3pt_bubble" cx="698.64" cy="272.44" r="31.28"/> <circle id="bubble03" class="mid_blue_stroke_100_3pt_bubble" cx="1389.28" cy="308.94" r="15.64"/> <circle id="bubble04" class="mid_blue_stroke_100_3pt_bubble" cx="683" cy="104.76" r="15.64"/> <circle id="bubble05" class="mid_blue_stroke_100_3pt_bubble" cx="1326.46" cy="363.49" r="7.82"/> <circle id="bubble06" class="mid_blue_stroke_100_3pt_bubble" cx="985.57" cy="483.91" r="7.82"/> <circle id="bubble07" class="mid_blue_stroke_100_3pt_bubble" cx="308.37" cy="677.93" r="31.28"/> <circle id="bubble08" class="mid_blue_stroke_100_3pt_bubble" cx="389.1" cy="583.31" r="15.64"/> <circle id="bubble09" class="mid_blue_stroke_100_3pt_bubble" cx="1032.2" cy="528.25" r="15.64"/> <circle id="bubble10" class="mid_blue_stroke_100_3pt_bubble" cx="326.28" cy="520.43" r="7.82"/> <circle id="bubble11" class="mid_blue_stroke_100_3pt_bubble" cx="587.16" cy="229.39" r="7.82"/> </g> <g id="fish"> <g id="squish-fish"> <path id="sf-leg01" class="dark_blue_stroke_100_30pt_legs" d="M312.11,380.15c0,0-25.52,12.39-25.52,42.25"/> <path id="sf-leg02" class="dark_blue_stroke_100_30pt_legs" d="M344.47,380.15c0,0-12.76,12.39-12.76,42.25"/> <path id="sf-leg03" class="dark_blue_stroke_100_30pt_legs" d="M376.83,380.15c0,0,0,12.39,0,42.25"/> <path id="sf-leg04" class="dark_blue_stroke_100_30pt_legs" d="M409.19,380.15c0,0,12.76,12.39,12.76,42.25"/> <path id="sf-leg05" class="dark_blue_stroke_100_30pt_legs" d="M441.56,380.15c0,0,25.52,12.39,25.52,42.25"/> <path id="sf-body" class="dark_blue_fill_100" d="M517.71,318.58c0,77.8-63.07,79.13-140.88,79.13s-140.88-1.33-140.88-79.13 s63.07-159.05,140.88-159.05S517.71,240.78,517.71,318.58z"/> <path id="sf-top-highlight01" class="dark_blue_fill_85" d="M294.06,286.26c12.74,15.4,43.16-23.71,82.77-23.71 s70.03,39.1,82.77,23.71c7.97-9.63,20.82-7.95,29.75-1.77c2.62,1.81,6.13-0.41,5.52-3.54c-4.78-24.71-16.35-48.89-33.33-68.9 c-23.6-27.8-53.68-43.12-84.71-43.12s-61.11,15.31-84.71,43.12c-16.98,20.01-28.55,44.2-33.33,68.9c-0.61,3.13,2.9,5.36,5.52,3.54 C273.24,278.31,286.1,276.63,294.06,286.26z"/> <path id="sf-top-highlight02" class="st0" d="M451.92,277.85c-4.65,0-12.56-4.39-20.94-9.04c-14.65-8.13-32.89-18.25-54.14-18.25 c-21.25,0-39.49,10.12-54.14,18.25c-8.38,4.65-16.3,9.04-20.94,9.04c-1.38,0-2.21-0.38-3.06-1.42c-4.87-5.88-11.5-8.99-19.18-8.99 c-2.25,0-4.52,0.27-6.76,0.79c-3.07,0.71-5.77-2.21-4.87-5.22c5.69-19.16,15.56-37.46,28.82-53.09c22.44-26.44,50.9-41,80.14-41 s57.7,14.56,80.14,41c13.26,15.63,23.14,33.93,28.82,53.09c0.9,3.02-1.81,5.93-4.87,5.22c-2.24-0.52-4.51-0.79-6.76-0.79 c-7.68,0-14.32,3.11-19.18,8.99C454.13,277.46,453.3,277.85,451.92,277.85z"/> <g id="sf-spots"> <circle class="dark_blue_fill_75" cx="295.55" cy="361.83" r="10.58"/> <circle class="dark_blue_fill_75" cx="418.76" cy="367.91" r="12.24"/> <circle class="dark_blue_fill_75" cx="480.29" cy="339.24" r="8.74"/> <circle class="dark_blue_fill_75" cx="345.33" cy="371.49" r="6.31"/> <circle class="dark_blue_fill_75" cx="340.98" cy="311.92" r="5.29"/> <circle class="dark_blue_fill_75" cx="281.89" cy="325.66" r="5.29"/> <circle class="dark_blue_fill_75" cx="308.37" cy="338.12" r="3.74"/> <circle class="dark_blue_fill_75" cx="354.68" cy="325.66" r="1.87"/> <circle class="dark_blue_fill_75" cx="388.02" cy="355.67" r="1.87"/> <circle class="dark_blue_fill_75" cx="264.69" cy="338.11" r="2.82"/> <circle class="dark_blue_fill_75" cx="465.92" cy="320.37" r="2.82"/> <circle class="dark_blue_fill_75" cx="437.64" cy="339.07" r="3.91"/> <circle class="dark_blue_fill_75" cx="462.04" cy="365.17" r="3.89"/> </g> <path id="sf-mouth" class="dark_blue_stroke_100_6pt" d="M363.78,206.25c2.51,4.63,7.42,3.89,13.05,3.89 c5.64,0,10.54,0.74,13.05-3.89"/> <path id="sf-chin" class="dark_blue_stroke_100_2pt" d="M384.11,221.08c-1.4-1.73-4.13-2.91-7.28-2.91 c-3.14,0-5.88,1.18-7.28,2.91"/> <circle id="sf-left-eye" class="white_fill" cx="334.9" cy="190.73" r="6.07"/> <circle id="sf-left-pupil" class="dark_blue_fill_100" cx="334.9" cy="188.78" r="4.12"/> <circle id="sf-right-eye" class="white_fill" cx="418.76" cy="190.73" r="6.07"/> <circle id="sf-right-pupil" class="dark_blu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0