div+css实现可爱小兔子头效果代码-html代码-BFW代码库

div+css实现可爱小兔子头效果代码

代码语言：html

代码描述：div+css实现可爱小兔子头效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: orange;
  font-size: 16px;
}

.head {
  background: #fff;
  height: 10em;
  width: 10em;
  border-radius: 50%;
  position: absolute;
  top: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.eye {
  position: absolute;
  background: #000;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  top: 50%;
}
.eye.left {
  left: 2.5em;
}
.eye.right {
  right: 2.5em;
}
.eye--glow {
  background: #fff;
  height: 0.5em;
  width: 0.5em;
  border-radius: 50%;
}

.nose {
  position: absolute;
  -webkit-clip-path: ellipse(23% 12% at 50% 50%);
          clip-path: ellipse(23% 12% at 50% 50%);
  height: 3em;
  width: 3em;
  top: 58%;
  left: 50%;
  transform: translate(-50%, 0);
  background: #ff9aed;
  -webkit-animation: movenose 0.5s ease 1s infinite;
          animation: movenose 0.5s ease 1s infinite;
}

.ear {
  position: absolute;
  top: -11em;
  background: #fff;
  width: 2em;
  height: 20em;
  -webkit-clip-path: ellipse(50% 20% at 50% 50%);
          clip-path: ellipse(50% 20% at 50% 50%);
  transform-origin: bottom;
}
.ear.left {
  left: 2em;
}
.ear.right {
  right: 2em;
  transform: rotate(0);
  -webkit-animation: shake-ear 4s ease 4s infinite;
          animation: shake-ear 4s ease 4s infinite;
}
.ear--inner {
  position: absolute;
  top: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  background: #ff9aed;
  -webkit-clip-path: ellipse(40% 15% at 50% 50%);
          clip-path: ellipse(40% 15% at 50% 50%);
  height: 16em;
  width: 1.4em;
}

.blink {
  background: #fff;
  position: absolute;
  top: 29%;
  border-radius: 50%;
  z-index: 10;
  transform: translateY(0);
  height: 2em;
  width: 2em;
  -webkit-animation: blink 6s ease infinite;
          animation: blink 6s ease infinite;
}
.blink.left {
  left: 2.25em;
}
.blink.right {
  right: 2.25em;
}

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