css3绘制一个会动的大嘴鸟

如何利用css3绘制一个会动的大嘴鸟（动画效果），下面web建站小编给大家介绍一下大嘴鸟动画代码！

html代码

<div class="dong">
  <div class="monster">
    <div class="monster__face">
      <div class="monster__eye avatar-eye avatar-eye--green eye--left">
        <div class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span>
        </div>
      </div>
      <div class="monster__eye avatar-eye avatar-eye--violet eye--right">
        <div class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span>
        </div>
      </div>
      <div class="monster__noses">
        <div class="monster__nose"></div>
        <div class="monster__nose"></div>
      </div>
      <div class="monster__mouth">
        <div class="monster__top"></div>
        <div class="monster__bottom"></div>
      </div>
    </div>
  </div>
</div>

css3代码

 /* 大嘴鸟*/
.dong {
  z-index:9999;
  position:fixed;
  top:-40px;
  right:-80px;
  transform:scale(0.24);
  -webkit-transform:scale(0.24);
  -moz-transform:scale(0.24);
}
.monster {
  transform:rotate(-50deg);
  -ms-transform:rotate(-50deg);
  /* IE 9 */
  -moz-transform:rotate(-50deg);
  /* Firefox */
  -webkit-transform:rotate(-50deg);
  /* Safari 和 Chrome */
  -o-transform:rotate(-50deg);
  /* Opera */
  display:flex;
  justify-content:center;
  position:relative;
  width:170px;
  height:400px;
  border-top-left-radius:200px;
  border-top-right-radius:200px;
  background-color:#3C47D7;
  box-shadow:20px 20px 60px #4650E5;
}
.monster__face {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  position:absolute;
  top:14%;
  width:75%;
  height:160px;
}
.monster__noses {
  top:50%;
  display:flex;
  justify-content:space-between;
  width:28%;
  height:auto;
  margin-bottom:10px;
}
.monster__nose {
  width:8px;
  height:12px;
  border-radius:20px;
  background:rgba(0,0,0,0.5);
  box-shadow:4px 8px 5px rgba(0,0,0,0.1);
}
.monster__mouth {
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  width:100%;
  height:0%;
  overflow:hidden;
  border:25px solid #FFC333;
  border-radius:100px;
  background-color:#810332;
  animation:mouth 1.75s infinite;
  box-shadow:4px 8px 5px rgba(0,0,0,0.2);
  box-sizing:border-box;
}
.monster__mouth::before {
  content:'';
  position:absolute;
  width:150px;
  height:80px;
  border-radius:100px;
  background-color:#400018;
}
.monster__mouth::after {
  content:'';
  position:absolute;
  bottom:-80px;
  width:160px;
  height:80px;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
  background-color:#DC1B50;
  animation:tongue 1.75s infinite;
}
.monster__top {
  position:absolute;
  top:-30px;
  width:170px;
  height:30px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background-color:#ffffff;
  z-index:100;
  animation:t 1.75s infinite;
}
.monster__bottom {
  position:absolute;
  bottom:0;
  width:100px;
  height:30px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background-color:#ffffff;
  z-index:100;
  animation:b 1.75s infinite;
}
.avatar-eye {
  position:absolute;
  top:-10%;
  width:65px;
  height:65px;
  background:linear-gradient(105deg,white,#cb87f4);
  border-radius:100%;
  box-shadow:4px 8px 5px rgba(0,0,0,0.2);
  margin:3px;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}
.avatar-eye--green {
  background:linear-gradient(to bottom,#fdfdfd,#c3efea);
}
.avatar-eye--violet {
  background:linear-gradient(to bottom,#fdfdfd,#e6d6f6);
}
.eye--left {
  left:10%;
}
.eye--right {
  left:85%;
}
.eye--center {
  left:45%;
  top:10%;
}
.avatar-eye-pupil {
  position:absolute;
  width:55%;
  height:55%;
  left:50%;
  top:25%;
  -webkit-transform:translate(-50%);
  transform:translate(-50%);
  z-index:100;
  border-radius:100%;
}
.pupil--green {
  background:linear-gradient(135deg,rgba(188,248,177,0.7),#2fa38c 75%);
}
.pupil--pink {
  background:linear-gradient(135deg,#f1a183,#8535cd);
}
.avatar-eye-pupil-blackThing {
  position:absolute;
  width:55%;
  height:55%;
  left:50%;
  top:25%;
  background:#2c2f32;
  -webkit-transform:translate(-50%);
  transform:translate(-50%);
  border-radius:100%;
  box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
.avatar-eye-pupil-lightReflection {
  position:absolute;
  width:7px;
  height:7px;
  left:25%;
  top:10%;
  background:#ebebeb;
  -webkit-transform:translate(-50%);
  transform:translate(-50%);
  border-radius:100%;
  box-shadow:10px 10px 10px rgba(255,255,255,0.2);
}
/*大嘴动起来*/
@keyframes t {
  0%,10%,80%,100% {
  	top:-30px;
  }
  20% {
  	top:0px;
  }
  30% {
  	top:-20px;
  }
  40% {
  	top:-0px;
  }
  50% {
  	top:-25px;
  }
  70% {
  	top:0px;
  }
}
@keyframes b {
  0%,10%,80%,100% {
  	bottom:-30px;
  }
  20% {
  	bottom:0px;
  }
  30% {
  	bottom:-20px;
  }
  40% {
  	bottom:-0px;
  }
  50% {
  	bottom:-25px;
  }
  70% {
  	bottom:0px;
  }
}
@keyframes mouth {
  0%,10%,100% {
  	width:100%;
  	height:0%;
  }
  15% {
  	width:90%;
  	height:30%;
  }
  20% {
  	width:50%;
  	height:70%;
  }
  25% {
  	width:70%;
  	height:70%;
  }
  30% {
  	width:80%;
  	height:60%;
  }
  35% {
  	width:60%;
  	height:70%;
  }
  40% {
  	width:55%;
  	height:75%;
  }
  45% {
  	width:50%;
  	height:90%;
  }
  50% {
  	width:40%;
  	height:70%;
  }
  55% {
  	width:70%;
  	height:95%;
  }
  60% {
  	width:40%;
  	height:50%;
  }
  65% {
  	width:100%;
  	height:60%;
  }
  70% {
  	width:100%;
  	height:70%;
  }
  75% {
  	width:90%;
  	height:70%;
  }
  80% {
  	width:50%;
  	height:70%;
  }
  85% {
  	width:90%;
  	height:50%;
  }
  85% {
  	width:40%;
  	height:70%;
  }
  90% {
  	width:90%;
  	height:30%;
  }
  95% {
  	width:100%;
  	height:10%;
  }
}
@keyframes tongue {
  0%,20%,100% {
	bottom:-80px;
  }
  30%,90% {
  	bottom:-40px;
  }
  40% {
  	bottom:-45px;
  }
  50% {
  	bottom:-50px;
  }
  70% {
  	bottom:-80px;
  }
  90% {
  	bottom:-40px;
  }
}

three.js绘制的八大行星运动效果

3D粒子波浪动画效果three.js

css3如何利用Flex实现响应式表格布局（Flex弹性布局）

css3中justify-content属性的基本用法

css3有哪些新特性（简单介绍）

标签： css3, 动画效果, 大嘴鸟, 绘制动画

上面是“css3绘制一个会动的大嘴鸟”的全面内容，想了解更多关于 好玩 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2812.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！