svg+css实现炫酷带墨镜卡通小鸡摇摆动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现炫酷带墨镜卡通小鸡摇摆动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
.wrap {
  position:fixed;
  top:0;
  left:0;
  overflow:hidden;
  width:100%;
  height:100%;
  animation:6s BxShdw ease-in-out;
}
@keyframes BxShdw {
  0%,30%,70%,100% {
    box-shadow:0 0 5vmax rgba(0,0,0,0.35) inset
  }
  15%,50%,85% {
    box-shadow:0 0 10vmax #cb0167 inset
  }
}

svg#Chicken {
  display:block;
  position:absolute;
  width:100vmin;
  height:100vmin;
  top:50%;
  left:50%;
  margin:-50vmin 0 0 -50vmin;
  z-index:5;
  animation:8s Chck ease-in-out infinite
}
@keyframes Chck {
  0%,30%,60% {transform:rotate(0deg)}
  15% {transform:rotate(45deg)}
 45% {transform:rotate(-45deg)}
}
svg#Rays {
  width:140vmax;
  height:140vmax;
  top:50%;
  left:50%;
  margin:-70vmax 0 0 -70vmax;
    position:absolute;
  z-index:1;
  animation:32s R360 linear infinite
}
@keyframes R360 {
  0% {transform:rotate(0deg)}
    100% {transform:rotate(360deg)}
}
.Glassez {
  stroke:rgba(255,55,55,0.35);
  stroke-width:3;
  stroke-dasharray:800;
  stroke-dashoffset:800;
  animation:8s Gls linear infinite
}
@keyframes Gls {
  0% {stroke-dashoffset:800;}
  30% {stroke-dashoffset:0;}
  60%,100% {stroke-dashoffset:-800;}
}
.brows {
  animation:8s Brows ease-in-out infinite
}
@keyframes Brows {
  0%,30%,60%,80%,90%,100% {transform:translate(0,0)}
  15%,45%,85%,95% {transform:translate(0,-16px)}
}
</style>

  
  
</head>

<body translate="no">
  <div class="wrap">
<svg id="Chicken" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
    <linearGradient id="grd__a" x1="300.621" x2="410.152" y1="702.911" y2="812.442" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#b5151f" />
        <stop offset=".045" stop-color="#c32d26" />
        <stop offset=".122" stop-color="#d74e30" />
        <stop offset=".2" stop-color="#e66837" />
        <stop offset=".28" stop-color="#f17b3d" />
        <stop offset=".363" stop-color="#f88640" />
        <stop offset=".453" stop-color="#fa8a41" />
        <stop offset="1" stop-color="#fa8a41" />
    </linearGradient>
    <path fill="url(#grd__a)" d="M410.7 719.3c-4 16.2-24.3 66.4-24.3 66.4s10.2 10.8 15.1 20.4c10.6 20.6-23.4 27.3-23.4 27.3l-3.5-15.6 1.4 16.8-.8 2.2c-2.2 15.9-15.9 28.2-32.4 28.2-13.3 0-24.8-8-29.9-19.4-.8-2-1.5-3.9-2.1-6.1.5 2.1 1.1 4.1 2.1 6.1-6.2 10.3-18.7 17.3-33.2 17.3-20.6 0-37.4-14.3-37.4-31.8 0-17.6 16.7-31.8 37.4-31.8h.7c6.9.1 13.3 1.8 18.8 4.7-5.5-2.9-12-4.7-18.9-4.8 10.1-.7 19 .2 19 .2l21.4-19.3s35.4-46.8 46-88.5c3.2-12.6-3.5-51.1-3.5-51.1l49-24.4c-.1-.1 5.6 74.5-1.5 103.2z">
        <animateTransform attributeName="transform" type="rotate" dur="5s" values="0,412,616; 25,412,616;0,412,616;" repeatCount="indefinite"/>
    </path>
    <linearGradient id="grd__b" x1="458.473" x2="656.776" y1="658.479" y2="856.781" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#b5151f" />
        <stop offset=".045" stop-color="#c32d26" />
        <stop offset=".122" stop-color="#d74e30" />
        <stop offset=".2" stop-color="#e66837" />
        <stop offset=".28" stop-color="#f17b3d" />
        <stop offset=".363" stop-color="#f88640" />
        <stop offset=".453" stop-color="#fa8a41" />
        <stop offset="1" stop-color="#fa8a41" />
    </linearGradient>
    <path fill="url(#grd__b)" d="M670.8 831.1c0 17.5-16.8 31.8-37.4 31.8-14.4 0-27-7-33.1-17.2-5.1 11.3-16.6 19.3-29.9 19.3-16.5 0-30.1-12.2-32.4-28.2l-.8-2.2 1.4-16.8-3.5 15.6s-34-6.7-23.4-27.3c4.9-9.6 15.1-20.4 15.1-20.4s-20.3-50.2-24.3-66.4c-7.1-28.7-1.4-103.3-1.4-103.3l49.1 24.4s-6.7 38.5-3.5 51.1c10.5 41.7 46 88.5 46 88.5l21.4 19.3s9-.9 19-.2c-5.1.1-10 1.1-14.4 2.8 4.4-1.6 9.2-2.6 14.2-2.7h.7c20.5.1 37.2 14.3 37.2 31.9z"> <animateTransform attributeName="transform" type="rotate" dur="5s" values="0,501,616; -25,501,616;0,501,616;" repeatCount="indefinite"/>
  </path>
    <linearGradient id="grd__c" x1="538.755" x2="473.977" y1="798.088" y2="733.31" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#fef62f" />
        <stop offset="1" stop-color="#ffda33" />
    </linearGradient>
    <path fill="url(#grd__c)" d="M507.7 184.5c-17.7 0-32.2-14.5-32.2-32.2v-38.6c0-17.7 14.5-32.2 32.2-32.2 17.7 0 32.2 14.5 32.2 32.2v38.6c-.1 17.7-14.5 32.2-32.2 32.2z" />
    <linearGradient id="grd__d" x1="421.734" x2="356.956" y1="798.089" y2="733.311" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#fef62f" />
        <stop offset="1" stop-color="#ffda33" />
    </linearGradient>
    <path fill="url(#grd__d)" d="M390.7 184.5c-17.7 0-32.2-14.5-32.2-32.2v-38.6c0-17.7 14.5-32.2 32.2-32.2s32.2 14.5 32.2 32.2v38.6c0 17.7-14.5 32.2-32.2 32.2z" />
    <linearGradient id="grd__e" x1="492.207" x2="402.595" y1="837.304" y2="747.692" gradientTransform="matrix(1 0 0 -1 0 900)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#fef62f" />
        <stop offset="1" stop-color="#ffda33" />
    </linearGradient>
    <path fill="url(#grd__e)" d="M449.2 176.5c-25.1 0-45.6-20.5-45.6-45.6V80.5c0-25.1 20.5-45.6 45.6-45.6s45.6 20.5 45.6 45.6v50.3c.1 25.2-20.5 45.7-45.6 45.7z" />
    <linearGradient id="grd__f" x1="650.855" x2="760.598" y1="247.549" y2="250.568" gradientTransform="matrix(.9274 -.3742 -.3117 -.7725 175.948 909.737)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#d39d21" />
        <stop offset=".25" stop-color="#d6a022" />
        <stop offset=".642" stop-color="#f9ef56" />
        <stop offset="1" stop-color="#faf358" />
    </linearGradient>
    <path class="hand hand-l" fill="url(#grd__f)" d="M797.2 607.2c-22.4 7.6-37.5-18.2-55.6-54.8-16.9-34-24.5-81.6-34.4-100.5-10.6-20.5-34.4-40.1-37.8-48.5 0 0-20.7-79.1 8.9-91l5.6-2.2c29.6-12 104.7 146.3 104.7 146.3 20.7 49.7 30.9 143 8.6 150.7z">
        <animateTransform attributeName="transform" type="rotate" dur="3s" values="0,670,380; -25,670,380;0,670,380;" repeatCount="indefinite"/>
      </path>
    <linearGradient id="grd__g" x1="2188.386" x2="2298.128" y1="-497.241" y2="-494.223" gradientTransform="matrix(-.9274 -.3742 .3117 -.7725 2382.015 909.737)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#d39d21" />
        <stop offset=".25" stop-color="#d6a022" />
        <stop offset=".642" stop-color="#f9ef56" />
        <stop offset="1" stop-color="#faf358" />
    </linearGradient>
    <path class="hand hand-r" fill="url(#grd__g)" d="M102.8 607.2c22.4 7.6 37.5-18.2 55.6-54.8 16.9-34 24.5-81.6 34.4-.........完整代码请登录后点击上方下载按钮下载查看