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

纯css实现皮卡丘动画效果

代码语言：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;
}

..........完整代码请登录后点击上方下载按钮下载查看