5 636 Codepen

Анимация акулы на SVG

Анимация нарисованной на SVG акулы плывущей в океане

HTML

<section>
    <div id="bg">
        <div class="wave">
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" height="100%" width="100%" preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18s 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax" transform="translateX(50)">
   <use xlink:href="#gentle-wave" x="15" y="-10" fill="#0052BF"/>
   <use xlink:href="#gentle-wave" x="15" y="10" fill="#0048B6"/>  
  </g>
</svg>
        </div>
    </div>
    <div id="shark-container">
        <div id="sharky">
            <svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg3713" width="100%" height="644" viewBox="0 0 1000 644"
             sodipodi:docname="sharky.svg" inkscape:version="0.92.3 (2405546, 2018-03-11)" enable-background="new">
  <metadata
     id="metadata3719">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs3717">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient2175">
      <stop
         style="stop-color:#deebeb;stop-opacity:1;"
         offset="0"
         id="stop2171" />
      <stop
         style="stop-color:#deebeb;stop-opacity:0;"
         offset="1"
         id="stop2173" />
    </linearGradient>
    <marker
       inkscape:stockid="Arrow1Lstart"
       orient="auto"
       refY="0.0"
       refX="0.0"
       id="Arrow1Lstart"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         id="path1554"
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
         transform="scale(0.8) translate(12.5,0)" />
    </marker>
    <marker
       inkscape:stockid="Arrow1Sstart"
       orient="auto"
       refY="0.0"
       refX="0.0"
       id="Arrow1Sstart"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         id="path1566"
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
         transform="scale(0.2) translate(6,0)" />
    </marker>
    <linearGradient
       id="linearGradient4835"
       osb:paint="solid">
      <stop
         style="stop-color:#009deb;stop-opacity:1;"
         offset="0"
         id="stop4833" />
    </linearGradient>
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter2072"
       x="-0.012448598"
       width="1.0248972"
       y="-0.333"
       height="1.666">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="0.84297166"
         id="feGaussianBlur2074" />
    </filter>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2175"
       id="linearGradient2177"
       x1="95.943848"
       y1="79.740578"
       x2="262.50898"
       y2="79.740578"
       gradientUnits="userSpaceOnUse" />
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter2072-0"
       x="-0.012448598"
       width="1.0248972"
       y="-0.333"
       height="1.666">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="0.84297166"
         id="feGaussianBlur2074-2" />
    </filter>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2175"
       id="linearGradient2208"
       gradientUnits="userSpaceOnUse"
       x1="95.943848"
       y1="79.740578"
       x2="262.50898"
       y2="79.740578" />
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter2072-2"
       x="-0.012448598"
       width="1.0248972"
       y="-0.333"
       height="1.666">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="0.84297166"
         id="feGaussianBlur2074-7" />
    </filter>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2175"
       id="linearGradient2224"
       gradientUnits="userSpaceOnUse"
       x1="95.943848"
       y1="79.740578"
       x2="262.50898"
       y2="79.740578" />
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter2072-8"
       x="-0.012448598"
       width="1.0248972"
       y="-0.333"
       height="1.666">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="0.84297166"
         id="feGaussianBlur2074-5" />
    </filter>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2175"
       id="linearGradient2240"
       gradientUnits="userSpaceOnUse"
       x1="95.943848"
       y1="79.740578"
       x2="262.50898"
       y2="79.740578" />
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter2072-02"
       x="-0.012448598"
       width="1.0248972"
       y="-0.333"
       height="1.666">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="0.84297166"
         id="feGaussianBlur2074-3" />
    </filter>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2175"
       id="linearGradient2256"
       gradientUnits="userSpaceOnUse"
       x1="95.943848"
       y1="79.740578"
       x2="262.50898"
       y2="79.740578" />
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter2072-24"
       x="-0.012448598"
       width="1.0248972"
       y="-0.333"
       height="1.666">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="0.84297166"
         id="feGaussianBlur2074-33" />
    </filter>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2175"
       id="linearGradient2272"
       gradientUnits="userSpaceOnUse"
       x1="95.943848"
       y1="79.740578"
       x2="262.50898"
       y2="79.740578" />
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter2072-1"
       x="-0.012448598"
       width="1.0248972"
       y="-0.333"
       height="1.666">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="0.84297166"
         id="feGaussianBlur2074-71" />
    </filter>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient2175"
       id="linearGradient2288"
       gradientUnits="userSpaceOnUse"
       x1="95.943848"
       y1="79.740578"
       x2="262.50898"
       y2="79.740578" />
  </defs>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     id="namedview3715"
     showgrid="false"
     inkscape:zoom="1.3167702"
     inkscape:cx="218.91196"
     inkscape:cy="312.3513"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer8"
     showguides="true"
     inkscape:object-paths="true"
     inkscape:snap-smooth-nodes="true" />
  <g
     inkscape:groupmode="layer"
     id="layer3"
     inkscape:label="fon"
     style="display:inline;opacity:1" />
  <g
     inkscape:groupmode="layer"
     id="layer12"
     inkscape:label="tail">
    <g
       style="display:inline;opacity:1"
       id="g6447"
       transform="translate(-966.49691,250.85113)">
      <path
         sodipodi:nodetypes="ccscccscscc"
         inkscape:connector-curvature="0"
         id="path6440"
         d="m 1248.8891,46.325478 c -31.2107,-24.59472 -56.1938,-1.604553 -85.4363,22.023584 -4.9679,3.7004 -6.5607,1.043768 -7.1086,-3.206187 -3.1721,-24.604388 14.0179,-45.389826 29.8916,-63.2442834 -13.7127,-52.5286296 -19.7856,-94.4634496 -18.1612,-138.5276016 1.987,-1.30125 4.2724,-1.84302 8.5058,1.96403 14.6206,26.19002 30.8925,46.938636 38.1718,67.103643 8.9126,24.689619 25.88,51.691212 38.5932,47.790997 24.3268,8.366659 61.961,-0.399789 70.4293,15.4146249 9.5872,17.9037471 -6.4877,72.8018641 -14.1872,99.6573401 z"
         style="fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         sodipodi:nodetypes="cscsccccc"
         inkscape:connector-curvature="0"
         id="path6442"
         d="m 1253.974,12.295934 c -51.9972,-10.6739789 -76.8616,-112.108481 -85.8994,-148.924944 -0.3459,-1.40889 5.1359,-1.31659 6.0822,0.20038 -1.1513,-0.73385 1.3403,0.43966 2.5772,2.03867 16.0628,20.76396 25.8327,42.437667 38.0182,66.828623 12.2988,20.754979 20.3714,49.759983 38.5932,47.790997 76.0669,6.603019 119.5016,3.280546 125.0092,11.9878337 L 1325.168,13.014343 c -8.6797,1.570911 -46.3234,4.602766 -71.194,-0.718409 z"
         style="fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer6"
     inkscape:label="spinefin">
    <g
       id="g890"
       transform="translate(-837.52372,-2.093098)">
      <path
         sodipodi:nodetypes="ccscc"
         inkscape:connector-curvature="0"
         id="path854"
         d="m 1227.8526,227.2873 c 0.4474,-46.89705 1.7496,-78.12816 -34.3681,-114.91819 -3.5809,-7.69805 -3.1911,-16.490321 10.203,-16.378526 51.8323,0.432623 120.6243,52.247226 158.4153,114.381186 z"
         style="fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         sodipodi:nodetypes="cccc"
         inkscape:connector-curvature="0"
         id="path856"
         d="m 1226.6972,180.00941 c 28.502,0.88405 59.653,2.77247 107.077,33.93176 -34.3779,4.33162 -68.74,8.66125 -105.9216,13.34613 0.4684,-15.56509 0.4996,-31.67816 -1.1554,-47.27789 z"
         style="display:inline;opacity:1;fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer4"
     inkscape:label="body"
     style="display:inline;opacity:1">
    <g
       id="g6381"
       transform="translate(93.488295,75.269549)">
      <path
         sodipodi:nodetypes="cccscccccccssccc"
         inkscape:connector-curvature="0"
         id="path4585"
         d="m 469.28,123.11098 c 79.5093,-4.9539 158.9761,-9.01033 230.0532,4.74271 14.6526,5.14375 53.412,6.09218 57.9961,32.75705 0.09,3.7937 0.2151,6.79562 -0.7243,9.22502 -21.3713,55.26399 -42.2799,59.38542 -62.8288,88.00192 -15.6446,9.116 -24.0866,24.1973 -27.1675,37.59007 -1.5213,7.35138 -4.0244,11.72563 -3.3197,20.88067 -18.0232,7.58431 -37.3174,14.24055 -57.3614,17.78339 3.8869,19.3835 16.88477,27.8421 27.69614,43.43751 0.3839,4.10453 -1.13715,11.90182 -3.13405,15.05404 -77.59503,75.97706 -239.77503,63.88906 -288.76649,5.41156 -44.1141,-41.74341 -76.62008,-105.84563 -127.9635,-153.39799 -4.40536,-4.08008 -5.5387,2.39899 -21.3767,-0.40671 -7.21908,-1.27886 -26.6872,-52.4542 17.1458,-102.56716 10.5787,3.62097 17.6493,7.94353 23.1832,12.57345 167.8114,-30.1297 177.9428,-25.21943 236.568,-31.08553 z"
         style="opacity:1;fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;image-rendering:optimizeQuality" />
      <path
         sodipodi:nodetypes="ccsccccsc"
         inkscape:connector-curvature="0"
         id="path4587"
         d="m 185.2535,185.15175 c 38.271,14.48697 207.4724,14.97566 567.6835,-6.3085 7.2332,-15.9604 4.42272,-24.21508 -1.1828,-30.44958 -9.92632,-11.04013 -30.3479,-16.30658 -52.421,-20.53998 -11.4268,-2.22038 -21.7796,-3.38561 -32.3149,-4.73014 -86.5756,-9.42185 -171.9215,-2.4009 -258.8861,4.86296 -61.318,5.20509 -116.9895,17.42032 -175.4202,26.21 -5.0998,-5.36008 -13.55061,-15.15103 -23.1832,-12.57345 -16.06593,4.29907 -18.7286,22.97925 -24.2753,43.52869 z"
         style="opacity:1;fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;image-rendering:optimizeQuality" />
      <path
         sodipodi:nodetypes="cccccssccc"
         inkscape:connector-curvature="0"
         id="path4603"
         d="m 693.77624,257.83768 c -53.537,6.41361 -107.7145,13.43571 -181.0785,38.68496 l -42.1486,15.94812 c -54.3486,27.10267 -108.99077,53.09904 -176.21563,31.66824 9.7708,12.33477 26.72362,34.81191 47.38969,53.85592 59.18457,73.09742 242.62382,59.80399 291.39604,-8.81445 3.34924,-4.7121 2.56373,-8.40639 0.5045,-11.65115 -15.6877,-24.71939 -24.77728,-28.67257 -27.6961,-43.43751 20.90462,-3.74125 39.9328,-10.19309 57.3614,-17.78339 1.0719,-29.18415 18.6392,-40.778 30.4872,-58.47074 z"
         style="opacity:1;fill:#deebeb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;image-rendering:optimizeQuality" />
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer7"
     inkscape:label="gills">
    <g
       style="display:inline;opacity:1"
       id="g923"
       transform="translate(-960.69981,-20.699836)">
      <path
         sodipodi:nodetypes="ccccc"
         inkscape:connector-curvature="0"
         id="path897"
         d="m 1485.076,264.34036 c -5.7188,21.48017 -6.1384,46.27236 -0.4027,74.91163 l 5.3699,-1.74525 c -3.954,-23.28788 -5.9314,-46.84841 0.4028,-71.55537 z"
         style="fill:#008ae0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         sodipodi:nodetypes="ccccc"
         inkscape:connector-curvature="0"
         id="path897-7"
         d="m 1467.0035,264.73207 c -5.7188,21.48017 -6.1384,46.27236 -0.4027,74.91163 l 5.3699,-1.74525 c -3.954,-23.28788 -5.9314,-46.84841 0.4028,-71.55537 z"
         style="display:inline;opacity:1;fill:#008ae0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         sodipodi:nodetypes="ccccc"
         inkscape:connector-curvature="0"
         id="path897-1"
         d="m 1504.1908,264.59783 c -5.7188,21.48017 -6.1384,46.27236 -0.4027,74.91163 l 5.3699,-1.74525 c -3.954,-23.28788 -5.9314,-46.84841 0.4028,-71.55537 z"
         style="display:inline;opacity:1;fill:#008ae0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="eye"
     style="display:inline">
    <g
       id="g4575"
       transform="translate(-493.02389,44.623131)">
      <ellipse
         ry="55.438675"
         rx="53.729954"
         cy="224.03302"
         cx="1153.0104"
         id="path4559"
         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.15914166;stroke-opacity:1" />
      <ellipse
         ry="40.157127"
         rx="39.967266"
         cy="218.33727"
         cx="1160.6049"
         id="path4561"
         style="fill:#ffde39;fill-opacity:1;stroke:none;stroke-width:1.18575025;stroke-opacity:1" />
      <ellipse
         ry="28.151949"
         rx="28.127871"
         cy="217.49199"
         cx="1165.2455"
         id="path4567"
         style="fill:#443e74;fill-opacity:1;stroke:none;stroke-width:0.99343288;stroke-opacity:1" />
      <ellipse
         ry="8.9528923"
         rx="9.0686188"
         cy="221.95604"
         cx="1150.6288"
         id="path4569"
         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.88806164;stroke-opacity:1" />
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer1"
     inkscape:label="fin"
     style="display:inline">
    <g
       id="g3747"
       transform="translate(2.8309148,-133.74858)">
      <g
         id="g3729" />
      <g
         id="g4552">
        <path
           sodipodi:nodetypes="cssscc"
           inkscape:connector-curvature="0"
           id="path3724"
           d="m 388.07075,528.94575 c -1.72947,-8.77404 53.00919,-20.39692 58.6233,22.51334 2.69459,20.59553 -8.34034,34.90859 -25.86514,44.2145 -2.48545,1.31981 -5.10144,2.5389 -7.82732,3.66092 -53.59378,22.06009 -149.66531,6.59415 -131.25158,-18.74725 41.90812,-10.0601 83.08977,-20.6673 106.98981,-53.84341"
           style="fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           style="fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           d="m 386.9491,530.46853 c 114.94367,39.5159 -60.24611,85.52555 -103.91865,51.41839 -1.22495,-0.95665 -2.00946,-0.72826 -1.28044,-1.29966 5.5284,-4.33315 65.36742,-6.0669 104.40758,-50.4294"
           id="path3726"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="cssc" />
      </g>
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer5"
     inkscape:label="jaws">
    <g
       inkscape:groupmode="layer"
       id="layer9"
       inkscape:label="jaws 1" />
    <g
       inkscape:groupmode="layer"
       id="layer10"
       inkscape:label="jaws 2" />
    <g
       inkscape:groupmode="layer"
       id="layer11"
       inkscape:label="jaws 3">
      <g
         id="g6438"
         transform="translate(-907.91491,-109.82297)">
        <path
           sodipodi:nodetypes="cccccc"
           inkscape:connector-curvature="0"
           id="path6398"
           d="m 1600.8868,519.45283 c 5.9715,14.91295 11.8765,29.89239 22.783,39.87028 5.6611,5.53706 10.5535,9.88173 -0.7594,18.22642 -100.3008,38.00175 -158.9937,-40.34714 -149.6085,-114.67453 3.1819,-8.03678 10.2286,-14.14487 21.2642,-4.17688 15.9327,25.93872 40.8688,61.00402 106.3207,60.75471 z"
           style="fill:#fb90c5;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           sodipodi:nodetypes="ccc"
           inkscape:connector-curvature="0"
           id="path6387"
           d="m 1477.9469,515.43559 c 43.7356,11.70371 87.1739,26.38052 127.9184,67.99481 -72.2317,15.88002 -112.5717,-20.5648 -127.9184,-67.99481 z"
           style="display:inline;opacity:1;fill:#eb64a7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
        <path
           sodipodi:nodetypes="ccccc"
           inkscape:connector-curvature="0"
           id="path6385"
           d="m 1484.1168,531.06331 c 26.1798,-13.03623 20.968,5.62749 21.0552,19.65025 18.0448,-8.36021 31.4779,-10.1871 25.441,15.56839 22.8135,-11.5331 31.2275,-10.48255 27.2135,20.12797 -56.2044,-8.81867 -70.5113,-49.80257 -73.7097,-55.34661 z"
           style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      </g>
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer8"
     inkscape:label="lines">
    <rect
       style="display:inline;opacity:0.5;fill:url(#linearGradient2208);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-0)"
       id="rect1552-8"
       width="162.51886"
       height="6.0754714"
       x="97.96698"
       y="76.702843"
       ry="3.0377357"
       transform="matrix(-0.85445125,0,0,1.0479948,492.33442,344.26572)" />
    <rect
       style="display:inline;opacity:0.5;fill:url(#linearGradient2256);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-02)"
       id="rect1552-6"
       width="162.51886"
       height="6.0754714"
       x="97.96698"
       y="76.702843"
       ry="3.0377357"
       transform="matrix(-0.85445125,0,0,1.0479948,718.82293,131.46389)" />
    <rect
       style="display:inline;opacity:0.5;fill:url(#linearGradient2288);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-1)"
       id="rect1552-83"
       width="162.51886"
       height="6.0754714"
       x="97.96698"
       y="76.702843"
       ry="3.0377357"
       transform="matrix(-0.85445125,0,0,1.0479948,531.33429,179.02648)" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer13"
     inkscape:label="lines 2">
    <rect
       style="display:inline;opacity:0.5;fill:url(#linearGradient2177);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072)"
       id="rect1552"
       width="162.51886"
       height="6.0754714"
       x="97.96698"
       y="76.702843"
       ry="3.0377357"
       transform="matrix(-0.85445125,0,0,1.0479948,439.66879,23.524771)" />
    <rect
       style="display:inline;opacity:0.5;fill:url(#linearGradient2224);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-2)"
       id="rect1552-4"
       width="162.51886"
       height="6.0754714"
       x="97.96698"
       y="76.702843"
       ry="3.0377357"
       transform="matrix(-0.85445125,0,0,1.0479948,626.26758,268.05022)" />
    <rect
       style="display:inline;opacity:0.5;fill:url(#linearGradient2240);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-8)"
       id="rect1552-1"
       width="162.51886"
       height="6.0754714"
       x="97.96698"
       y="76.702843"
       ry="3.0377357"
       transform="matrix(-0.85445125,0,0,1.0479948,408.92167,251.34409)" />
    <rect
       style="display:inline;opacity:0.5;fill:url(#linearGradient2272);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-24)"
       id="rect1552-5"
       width="162.51886"
       height="6.0754714"
       x="97.96698"
       y="76.702843"
       ry="3.0377357"
       transform="matrix(-0.85445125,0,0,1.0479948,635.298,433.4407)" />
  </g>
</svg>

        </div>

        <div id="link">
            <a target="_blank" href="http://webstripe.studio/">
                <h1>Made at Webstripe Studio</h1>
            </a>
            <a target="_blank" href="https://www.digitalocean.com/">
                <h2>DigitalOcean &copy; Sammy Mascot</h2>
            </a>
        </div>
    </div>

</section>

CSS

body {
    padding: 0;
    margin: 0;
    font-family: "Fira Sans", sans-serif;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
}

#bg {
    background-color: #005ec7;
    min-height: 100%;
    width: 100%;
    position: absolute;
}

h1,
h2 {
    margin: 5px;
}
h1 {
    font-size: 20px;
}
h2 {
    font-size: 16px;
}
@media (max-width: 980px) {
    h1 {
        font-size: 16px;
    }
    h2 {
        font-size: 12px;
    }
}
#link {
    display: flex;
    align-self: flex-end;
    justify-self: flex-end;
    margin-left: auto;
    flex-flow: column;
    z-index: 100;
}

#link a {
    text-decoration: none;
    color: #fff;
}

.wave {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    overflow: hidden;
}

.parallax > use {
    /*performance issues*/
    perspective: 1000;
    will-change: transform;
    backface-visibility: hidden;
    animation: flow 2s linear infinite;
}

@keyframes flow {
    0% {
        transform: translate(140px, 0%);
    }
    100% {
        transform: translate(-35px, 0%);
    }
}

.vawes {
    display: block;
    width: 100%;
    height: 10em;
    max-height: 100vh;
    margin: 0;
}
#shark-container {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}
#sharky {
    display: flex;
    position: absolute;
    width: 100%;
}

#layer12 {p
    perspective: 1000;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: right;
    animation: tail-swim 2s ease-in-out infinite;
}
@keyframes tail-swim {
    0% {
        transform: rotateY(-10deg);
    }
    50% {
        transform: rotateY(10deg);
    }
    100% {
        transform: rotateY(-10deg);
    }
}
#layer1 {
    perspective: 1000;
    will-change: transform;
    transform-origin: center;
    backface-visibility: hidden;
    animation: fin-swim 2s ease-in-out infinite;
}
@keyframes fin-swim {
    0% {
        transform: rotateZ(5deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(5deg);
    }
}

#path4561,
#path4567 {
    perspective: 1000;
    backface-visibility: hidden;
    will-change: transform;
    animation: eye-move 2s ease-in-out infinite;
}

@keyframes eye-move {
    50% {
        transform: translateX(-10px);
    }
}

#path4569 {
    perspective: 1000;
    backface-visibility: hidden;
    will-change: transform;
    animation: eye-move-2 2s ease-in-out infinite;
}

@keyframes eye-move-2 {
    50% {
        transform: translateX(-5px);
    }
}

#layer7 {
    perspective: 1000;
    backface-visibility: hidden;
    will-change: transform;
    transform-origin: center;
    animation: gills-move 2s linear infinite;
}

@keyframes gills-move {
    50% {
        transform: translateX(-3px) scale(1.01);
    }
}

#layer8 {
    perspective: 1000;
    backface-visibility: hidden;
    will-change: transform;
    transform-origin: right center;
    animation: lines-move 1s ease infinite;
}
#layer13 {
    perspective: 1000;
    backface-visibility: hidden;
    opacity: 0;
    will-change: transform;
    transform-origin: right center;
    animation: lines-move 1s ease infinite 0.5s;
}

@keyframes lines-move {
    0% {
        opacity: 1;
    }
    100% {
        transform: scaleX(1.2) translateX(20px);
        opacity: 0;
    }
}

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи