css模拟小鸡跳舞动画效果-html代码-BFW代码库

css模拟小鸡跳舞动画效果

代码语言：html

所属分类：动画

代码描述：css模拟小鸡跳舞动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  overflow:hidden;
  animation: colorChange 3.6s infinite linear both;
}

@keyframes colorChange{
  0%{
  background-color: #ddf08b;
  }
  20%{
  background-color: #edb272;
  }
  40%{
   background-color: #ed8272;
  }
  60%{
   background-color: #e0a6d2;
  }
  80%{
  background-color: #a2aceb;
  }
  100%{
  background-color: #a2ebcb;
  }
}

.container{
  width:100vw;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chick{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.face{
  width:40vmin;
  height:35vmin;
  border-radius:50%;
  background-color: #f6f350;
  border-top:1vmin solid #974549;
  border-left:1vmin solid #974549;
  border-right:1vmin solid #974549;
  position: relative;
  animation: dance 0.6s infinite both;
}

.face:after{
  content:"";
  width:42vmin;
  height:25vmin;
  border-radius:40% 40% 50% 50%;
  background-color: #f6f350;
  border-bottom:1vmin solid #974549;
  border-left:1vmin solid #974549;
  border-right:1vmin solid #974549;
  position: absolute;
  bottom:-10vmin;
  left:-3vmin;
}

.l-face-cover{
  width:20vmin;
  height:12vmin;
  background-color: #f6f350;
  position: absolute;
  top:12vmin;
  left:1vmin;
  z-index: 2;
}

.r-face-cover{
  width:20vmin;
  height:12vmin;
  background-color: #f6f350;
  position: absolute;
  top:12vmin;
  right:1vmin;
  z-index: 2;
}

.l-eye, .r-eye{
  width:3vmin;
  height:6vmin;
  border-radius:50%;
  background-color: #86252d;
  position: absolute;
  top:18vmin;
  z-index: 3;
}

.l-eye{
  left:13vmin;
}

.r-eye{
  right:13vmin;
}

.beak{
  width:10vmin;
  height:8vmin;
  border-radius:49% 51% 49% 51% / 75% 77% 23% 25% ;
  border:1vmin solid #974549;
  background-color: #d4ae41;
  position: absolute;
  top:25vmin;
  left:14vmin;
  z-index: 2;
}

.l-feather, .r-feather{
  width:3vmin;
  height:10vmin;
  border-radius:50% 50% 0 0;
  background-color: #f1ed51;
  border:0.5vmin solid #974549;
  position: absolute;
  top:-10vmin;
}

.l-feather{
   left:15vmin;
}

.r-feather{
   right:17.3vmin;
}

.body{
  width:40vmin;
  height:25vmin;
  border-radius:50%;
  background-color: #f6f350;
  border:1vmin solid #9d4e3d;
  position: relative;
  top:3vmin;
  z-index: -1;
  animation: bodyMoves 0.6s alternate 0.3.........完整代码请登录后点击上方下载按钮下载查看