css实现卡通恐龙动画效果代码-html代码-BFW代码库

css实现卡通恐龙动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现卡通恐龙动画效果代码

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

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

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

<style>
    body {
  overflow: hidden;
}
.tRex {
  position: absolute;
  font-size: 56vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 0;
  cursor:default;
}
.t-Rex {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: lightgrey;
  height: 70vh;
  width: 70vh;
  border-radius: 100%;
  box-shadow: 5px 15px 15px;
  border:3vh solid black;
  animation: wiggle4 5s linear infinite;
}
.snout {
  position: absolute;
  top: 18.5%;
  left: 12%;
  border-radius: 12px 23px 0px 0px;
  background-color: green;
  height: 8.5%;
  width: 25.5%;
  z-index: 50;
  overflow: hidden;
}
.headMark1 {
  position: absolute;
  height: 40%;
  width: 25%;
  right: -2%;
  background-color: darkgreen;
  top: 30%;
  border-radius: 50px;
}
.headMark2 {
  position: absolute;
  height: 10%;
  width: 70%;
  right: -8%;
  background-color: darkgreen;
  top: 2%;
  border-radius: 50px;
  z-index: 1000;
}
.nostril {
  position: absolute;
  top: 21%;
  left: 15%;
  border-radius: 100%;
  background-color: darkblue;
  height: 3%;
  width: 3%;
  z-index: 100;
}
.eye {
  position: absolute;
  top: 18.5%;
  left: 23.2%;
  border-radius: 0px 0px 50px 50px;
  background-color: darkgreen;
  height: 5.5%;
  width: 8.5%;
  z-index: 70;
}
.eyeball {
  position: absolute;
  top: 18.5%;
  left: 26%;
  border-radius: 0px 0px 50px 50px;
  background-color: darkblue;
  height: 3%;
  width: 3%;
  z-index: 100;
}
.eyelid {
  position: absolute;
  top: 15.75%;
  left: 23.2%;
  border-radius: 35px 35px 0px 0px;
  background-color: green;
  height: 3%;
  width: 8.5%;
  z-index: 105;
}
.jaw {
  position: absolute;
  top: 29.5%;
  left: 15%;
  border-radius: 0px 0px 35px 35px;
  background-color: green;
  height: 3%;
  width:.........完整代码请登录后点击上方下载按钮下载查看