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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看