css实现眼神与头跟随鼠标移动效果代码-html代码-BFW代码库

css实现眼神与头跟随鼠标移动效果代码

代码语言：html

代码描述：css实现眼神与头跟随鼠标移动效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #ffbe00;
  display: grid;
  grid-template-columns: auto auto auto;
  margin: 0;
  height: 100vh;
}

.mouth, .beard:after, .beard:before, .beard, .nose:after, .nose, .eye:after, .face, .head:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.head {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ce7253;
  width: 220px;
  height: 310px;
  border-radius: 115px;
  box-shadow: 0 -40px inset #673929, 0 62px inset #90503a;
  z-index: 100;
}
.head:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 220px;
  background: #ce7253;
  left: 0;
  top: 50px;
  border-radius: 60px 63px 60% 60%;
  transition: 0.3s ease-in;
  z-index: 5;
}
.head:after {
  content: "";
  width: 140px;
  height: 25px;
  background: #ff9c00;
  border-radius: 50%;
  bottom: -70px;
}

.ear {
  position: absolute;
  left: -28px;
  top: 127px;
  background: #ce7253;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  transition: 0.3s ease-in;
}
.ear:before {
  content: "";
  position: absolute;
  background: #a04e3a;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  top: 13px;
  left: 17px;
}
.ear:after {
  content: "";
  position: absolute;
  background: #fff;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  bottom: 4px;
  left: 16px;
}
.ear + .ear {
  left: auto;
  right: -28px;
}
.ear + .ear:after {
  left: auto;
  right: 16px;
}

.face {
  position: absolute;
  width: 110px;
  height: 165px;
  top: 105px;
  transition: 0.3s ease-in;
  z-index: 5;
}

.eye {
  position: absolute;
  top: 4px;
  left: 0px;
  width: 38px;
  height: 8px;
  background: #000;
  border-radius: 10px;
}
.eye:after {
  content: "";
  background: #000;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: 18px;
  transition: 0.3s ease-in;
}
.eye + .eye {
  left: auto;
  right: 4px;
}

.nose {
  position: absolute;
  top: 50px;
  width: 65px;
  height: 22px;
  background: #a04e3a;
  border-radius: 10px;
}
.nose:after {
  content: "";
  background: #a04e3a;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  top: -6px;
}

.beard {
  width: 86px;
  height: 120px;
  bottom: -35px;
  background: #000 radial-gradient(circle 13px at 50% 0, #ce7253 90%, #000 0) no-repeat;
  transition: 0.3s ease-in;
  border-radius: 50px;
}
.........完整代码请登录后点击上方下载按钮下载查看