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