纯css实现皮卡丘动画效果-html代码-BFW代码库

代码语言：html

代码描述：纯css实现皮卡丘动画效果

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


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

<style>
* {
  margin: 0;
  background: #d5fded;
  font-family: fredoka one, arial;
  font-size: 1.1em;
}

.box {
  width: 460px;
  height: 350px;
  position: absolute;
  background: transparent;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.head {
  position: absolute;
  background: #ffc720;
  width: 50%;
  height: 67%;
  top: 16.5%;
  left: 25%;
  background: transparent;
  border-radius: 50%;
}
.head .head-top {
  position: absolute;
  background: #ffc720;
  width: 90%;
  height: 100%;
  left: 5%;
  border-radius: 43%;
  z-index: 2;
}
.head .eyelids {
  position: absolute;
  background: #ffc720;
  width: 70%;
  height: 30%;
  top: 30%;
  left: 15%;
  visibility: hidden;
  z-index: 10;
  pointer-events: none;
}

.left-lid, .right-lid {
  position: absolute;
  background: #ffc720;
  width: 30%;
  height: 10%;
  background: black;
  border-radius: 30% 30% 50% 50%;
  bottom: 25%;
}

.left-lid {
  left: 4%;
}

.right-lid {
  right: 4%;
}

.head-top:hover ~ .eyelids,
head-top:active {
  visibility: visible;
  transition: visibility 2s ease;
}

.head-top:hover ~ .mouth-cover,
head-top:active {
  visibility: visible;
}

.head-bottom {
  position: absolute;
  background: #ffc720;
  width: 100%;
  height: 70%;
  top: 40%;
  border-radius: 50%;
  z-index: 2;
}

.ear-left, .ear-right {
  position: absolute;
  background: #ffc720;
  width: 30%;
  height: 70%;
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  bottom: 70%;
  z-index: 1;
}

.ear-left {
  left: -20%;
  transform: rotate(-25deg);
}

.ear-right {
  right: -20%;
  transform: rotate(70deg);
}

.inner-ear {
  position: absolute;
  background: #ffc720;
  width: 100%;
  height: 100%;
  top: 0%;
  -webkit-clip-path: polygon(0 0, 80% 0%, 0% 60%);
  clip-path: polygon(0 0, 80% 0%, 0% 60%);
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  background: black;
}

.eye-left, .eye-right {
  position: absolute;
  background: #ffc720;
  width: 20%;
  height: 23%;
  top: 35%;
  background: black;
  border-radius: 50%;
  z-index: 3;
}

.eye-left {
  left: 15%;
}

.eye-right {
  right: 15%;
}

.pupil {
  position: absolute;
  background: #ffc720;
  width: 38%;
  height: 38%;
  top: 15%;
  left: 46%;
  border-radius: 50%;
  background: white;
}

.nose {
  position: absolute;
  background: #ffc720;
  width: 5%;
  height: 5%;
  top: 60%;
  left: 47%;
  background: black;
  border-radius: 30% 30% 50% 50%;
  z-index: 4;
}

.cheek-left {
  position: absolute;
  background: #ffc720;
  width: 15%;
  height: 40%;
  top: 30%;
  -webkit-clip-path: ellipse(100% 50% at left);
  clip-path: ellipse(100% 50% at left);
  border-radius: 48%;
  background: red;
  z-index: 5;
}

.cheek-right {
  position: absolute;
  background: #ffc720;
  width: 15%;
  height: 40%;
  top: 30%;
  right: 0%;
  -webkit-clip-path: ellipse(100% 50% at right);
  clip-path: ellipse(100% 50% at right);
  border-radius: 48%;
  background: red;
  z-index: 5;
}

.mouth {
  position: absolute;
  background: #ffc720;
  width: 30%;
  height: 40%;
  top: 45%;
  left: 34%;
  background: #a6150c;
  border-radius: 50% 50% 51% 49% / 25% 24% 76% 75%;
}

.tongue {
  position: absolute;
  background: #ffc720;
  width: 87%;
  height: 60%;
  left: 6%;
  background: #eb9099;
  bottom: 0%;
  border-radius: 50% 50% 51% 49% / 25% 24% 76% 75%;
}

#left, #right {
  position: absolute;
  background: #ffc720;
  width: 60%;
  height: 30%;
  top: -10%;
  background: #ffc720;
  border-radius: 0% 30% 50% 30%;
}

#right {
  right: 0%;
}

.pikachu-body {
  position: absolute;
  background: #ffc720;
  width: 80%;
  height: 35%;
  left: 20%;
  bottom: -10%;
  border-radius: 50% 50% 0% 0% / 100% 100% 0 0;
}

.rings {
  width: 450px;
  height: 450px;
.........完整代码请登录后点击上方下载按钮下载查看