纯css实现绘制汤姆·诺克卡通形象眨眼效果-html代码-BFW代码库

代码语言：html

代码描述：纯css实现绘制汤姆·诺克卡通形象眨眼效果

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


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

<style>
* {
  box-sizing: border-box;
}
body {
  background-color: #0c7;
  min-height: 100vh;
}
img {
  opacity: 0.95;
  height: 100%;
  width: 100%;
  display: none;
}
.circle {
  background-color: #00b368;
  border-radius: 50%;
  height: calc(var(--size, 5) * 1vmin);
  width: calc(var(--size, 5) * 1vmin);
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  position: absolute;
}
.tom {
  height: 25vmin;
  position: fixed;
  width: 25vmin;
  z-index: 2;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.tom__head {
  height: 88%;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.tom__ear {
  --ear-hue: 45;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d2600), to(transparent)), radial-gradient(circle at center, #e68019 0 60%, #8a4d0f 80%);
  background: linear-gradient(#4d2600, transparent), radial-gradient(circle at center, #e68019 0 60%, #8a4d0f 80%);
  height: 28%;
  width: 34%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  position: absolute;
  top: 0;
}
.tom__ear--left {
  border-radius: 55% 45% 40% 50%/50% 50% 50% 40%;
  left: 0;
  -webkit-transform: translate(10%, -40%) rotate(-35deg);
          transform: translate(10%, -40%) rotate(-35deg);
}
.tom__ear--right {
  border-radius: 55% 45% 40% 50%/50% 50% 35% 50%;
  right: 0;
  -webkit-transform: translate(-10%, -40%) rotate(35deg);
          transform: translate(-10%, -40%) rotate(35deg);
  -webkit-animation: ear-right 5s infinite;
          animation: ear-right 5s infinite;
}
.tom__ear-inner {
  position: absolute;
  height: 60%;
  width: 65%;
  -webkit-filter: drop-shadow(0 0 10px #4d2600) blur(2px);
          filter: drop-shadow(0 0 10px #4d2600) blur(2px);
  background: radial-gradient(transparent 0 40%, #bf4055), #f5a3b1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -40%);
          transform: translate(-50%, -40%);
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
}
.tom__face {
  border-radius: 45% 45% 50% 50%/60% 60% 36% 36%;
  height: 100%;
  position: absolute;
  width: 100%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  background: radial-gradient(transparent 0 60%, #f7e6d4), linear-gradient(45deg, rgba(108,64,19,0.25) 0 15%, transparent 50%), #d98026;
}
.tom__mask {
  background: #4d2600;
  height: 60%;
  position: absolute;
  width: 84%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -62%);
          transform: translate(-50%, -62%);
  -webkit-filter: blur(4px);
          filter: blur(4px);
  border-radius: 50% 50% 10% 10%/60% 60% 30% 30%;
}
.tom__mask:after,
.tom__mask:before {
  content: '';
  position: absolute;
  background: #4d2600;
  height: 50%;
  width: 33%;
  top: 50%;
  border-radius: 0 0 50% 50%/0 0 60% 60%;
}
.tom__mask:before {
  left: 0;
  -webkit-transform: translate(0, 7%);
          transform: translate(0, 7%);
}
.tom__mask:after {
  right: 0;
  -webkit-transform: translate(0, 7%);
          transform: translate(0, 7%);
}
.tom__snout {
  height: 40%;
  width: 50%;
  background: radial-gradient(circle at 50% 30%, transparent 0 5%, rgba(242,242,242,0.15) 5%, transparent 25%), radial-gradient(circle at 50% 60%, #452608, transparent 50%), radial-gradient(circle at 50% 30%, #170d03 0 5%, transparent 8%), radial-gradient(circle at 50% 42%, #452608 0 20%, transparent 22%), radial-gradient(circle at 50% 40%, #fff 0 16%, transparent 22%), radial-gradient(circle at 50% 50%, #452608 0 20%, transparent 40%), radial-gradient(#d98026 0 60%, transparent 70%);
  -webkit-filter: blur(2px);
          filter: blur(2px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 20%);
          transform: translate(-50%, 20%);
}
.tom__eye {
  position: absolute;
  height: 32%;
  width: 18%;
  background: #f2f2f2;
  top: 50%;
  left: 50%;
  overflow: hidden;
}
.tom__eye--left {
  border-radius: 50% 45% 50% 45%/50% 45% 50% 45%;
  -webkit-transform: translate(-184%, -58%);
          transform: translate(-184%, -58%);
}
.tom__eye--right {
  border-radius: 50% 45% 50% 45%/50% 45% 50% 45%;
  -webkit-transform: translate(87%, -58%) rotate(-5deg);
          transform: translate(87%, -58%) rotate(-5deg);
}
.tom__pupil {
  height: 75%;
  width: 60%;
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  background: #0d6cf2;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-t.........完整代码请登录后点击上方下载按钮下载查看