gsap+svg实现一个三维卡通人物望远镜搜索中动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg实现一个三维卡通人物望远镜搜索中动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css?family=Kanit:900");
        body {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          min-height: 100vh;
          /*overflow: hidden;*/
          background-color: #0c56b5;
        }
        
        h1 {
          font-family: "Kanit";
          font-weight: 700;
          color: #fff;
          text-shadow: 0 1px 0 #09448f, 0 2px 0 #093f85, 0 3px 0 #083b7c, 0 4px 0 #083672, 0 5px 0 #073268, 0 6px 0 #062d5f, 0 7px 0 #062955, 0 8px 0 #05244c, 0 0 5px rgba(0, 62, 142, 0.05), 0 -1px 3px rgba(0, 62, 142, 0.2), 0 9px 9px rgba(0, 62, 142, 0.3), 0 12px 12px rgba(0, 62, 142, 0.3), 0 15px 15px rgba(0, 62, 142, 0.3);
          font-size: 4rem;
          text-align: center;
          width: 100%;
          margin: 0;
        }
        
        .box {
          background-color: #88ce02;
          width: 140px;
          height: 140px;
          border-radius: 10%;
        }
        
        .svg-container {
          display: inline-block;
          position: relative;
          width: 25em;
          padding-bottom: 25em;
          vertical-align: middle;
          overflow: hidden;
        }
        
        .svg-content {
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
        }
        
        #LeftFoot {
          transform-origin: 12px 2px;
        }
        
        .one {
          opacity: 0;
          -webkit-animation: dot 1.3s infinite;
          -webkit-animation-delay: 0s;
          animation: dot 1.3s infinite;
          animation-delay: 0s;
        }
        
        .two {
          opacity: 0;
          -webkit-animation: dot 1.3s infinite;
          -webkit-animation-delay: 0.2s;
          animation: dot 1.3s infinite;
          animation-delay: 0.2s;
        }
        
        .three {
          opacity: 0;
          -webkit-animation: dot 1.3s infinite;
          -webkit-animation-delay: 0.3s;
          animation: dot 1.3s infinite;
          animation-delay: 0.3s;
        }
        
        @-webkit-keyframes dot {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @keyframes dot {
          0% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        .st0 {
          fill: none;
          stroke: #55be93;
          stroke-width: 28;
          stroke-linecap: round;
          stroke-miterlimit: 10;
        }
        
        .st1 {
          fill: none;
          stroke: #55be93;
          stroke-width: 28;
          stroke-miterlimit: 10;
        }
        
        .st2 {
          fill: #54be93;
        }
        
        .st3 {
          fill: #53be93;
        }
        
        .st4 {
          fill: none;
          stroke: #1f3353;
          stroke-width: 8;
          stroke-linecap: round;
          stroke-miterlimit: 10;
        }
        
        .st5 {
          fill: #30a77b;
        }
        
        .st6 {
          fill: none;
          stroke: #30a77b;
          stroke-width: 26;
          stroke-linecap: round;
          stroke-miterlimit: 10;
        }
        
        .st7 {
          fill: #15263d;
        }
        
        .st8 {
          fill: #1f3353;
        }
        
        .st9 {
          fill: #1f3454;
        }
        
        .st10 {
          fill: #4ac6e7;
        }
        
        .st11 {
          fill: #6fcee5;
        }
        
        .st12 {
          fill: #ffffff;
        }
    </style>


</head>

<body>
    <div class="svg-container">
        <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
    <g id="LeftLeg">
      <polyline id="LeftLegPortion" class="st0" points="210.67,413.11 210.67,392.78 
		210.67,366.56 	"/>
      <line id="LeftFoot" class="st0" x1="196.37" y1="419.22" x2="210.67" y2="413.66" />
    </g>
    <g id="RightLeg">
      <line id="RightFoot" class="st0" x1="269.04" y1="417.61" x2="254.75" y2="412.06" />
      <polyline id="RightLegPortion" class="st1" points="254.75,413.11 254.75,392.78 254.75,366.56 	"/>
    </g>
    <path id="Body" class="st2" d="M254.5,263.44h-42.56c-11.03,0-20.06,9.02-20.06,20.06c0,0-10,49.06-10,66.11s9.03,28.22,20.06,28.22
	h62.56c11.03,0,20.06-8.03,20.06-28.22s-10-66.11-10-66.11C274.56,272.47,265.53,263.44,254.5,263.44z" />
    <g id="HeadGroup">
      <path id="Fin" class="st3" d="M145.55,131.66V65.28c0-9.71,11.85-14.44,18.54-7.41l70.2,73.79H145.55z" />
      <path id="Head" class="st3" d="M303.85,110.72H164.72c-24.46,0-44.47,20.01-44.47,44.47v81.42c0,24.46,20.01,44.47,44.47,44.47
		h139.13c24.46,0,44.47-20.01,44.47-44.47v-81.42C348.32,130.73,328.31,110.72,303.85,110.72z" />
      <path id="Mouth" class="st4" d="M210.56,230.78c0,0,8.89,9.56,21.56,9.56c13.72,0,22.61-8.67,22.61-8.67" />
    </g>
    <g id="ArmLeft">
      <circle id="HandLeft" class="st5" cx="135.99" cy="221.78" r="28.78" />
      <line id="ArmLeftPortion" class="st6" x1="197.22" y1="298.78" x2="133" y2="237.89" />
    </g>
    <g id="ArmRight">
      <line id="ArmRightPortion" class="st6" x1="266.42" y1="297.54" x2="330.64" y2="236.66"/>
      <circle id="HandRight" class="st5" cx="328.56" cy="221.78" r="28.78" />
    </g>
    
    <g id="Binoculars">
      <g id="Center">
      <path id="CenterBasePath" class="st7" d="M232.11,196.11c10,0,28.67,9.56,28.67,9.56v-39.11h-54.89v39.11
		C205.89,205.67,222.33,196.11,232.11,196.11z" />
      <circle id="CenterBaseCircle" class="st7" cx="232.11" cy="158.56" r="23.33" />
      <circle id="CenterOverCircle" class="st8" cx="232.38" cy="158" r="10.89" />
    </g>
      <g id="LeftLens" class="leftLens">
      <circle id="BinoBackLeft" class="st7" cx="161.42" cy="177.75" r="56.25" />
      <circle id="BinoBaseLeft" class="st9" cx="161.42" cy="177.92" r="56.25" />
      <circle id="BinoLensOuterLeft" class="st10" cx="161.89" cy="177.75" r="40.02" />
      <circle id="BinoLensInnerLeft" class="st11" cx="161.89" cy="176.28" r="24.89" />
      <circle id="FlareLargeLeft" class="st12" cx="146.17" cy="162.42" r="8.33" />
      <circle id="FlareSmallLeft" class="st12" cx="161" cy="180.45" r="5.66" />
    </g>
    <g id="RightLens">
      <circle id="BinoBackRight" class="st7" cx="303.33" cy="177.92" r="56.25" />
      <circle id="BinoBaseRight" class="st9" cx="303.33" cy="177.75" r="56.25" />
      <circle id="BinoLensOuterRight" class="st10" cx="303.66" cy="178.58" r="40.02" />
      <circle id="BinoLensInnerRight" class="st11" cx="303.66" cy="177.11" r="24.89" />
      <circle id="FlareLargeRight" class="st12" cx="286.81" cy="161.73" r="8.33" />
      <circle id="FlareSmallRight" class="st12" cx="303.56" cy="179.5" r="5.66" />
    </g>
    <.........完整代码请登录后点击上方下载按钮下载查看