纯css鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

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;
}
.beard:before {
  content: "";
  background: #ce7253;
  height: 64px;
  width: 74px;
  border-radius: 35px;
  top: 20px;
}
.beard:after {
  content: "";
  background: #000;
  width: 25px;
  height: 10px;
  border-radius: 10px;
  top: 52px;
}

.mouth {
  background: #fff;
  z-index: 5;
  width: 40px;
  height: 18px;
  border-radius: 0 0 20px 20px;
  top: 28px;
}

.move {
  flex: 1;
}
.move.top:hover ~ .head:before {
  top: 47px;
}
.move.top:hover ~ .head .ear {
  top: 132px;
}
.move.top:hover ~ .head .face {
  top: 90px;
}
.move.top:hover ~ .head .face .eye:after {
  top: 8px;
}
.move.top:hover ~ .head .beard {
  bottom: -30px;
}
.move.bottom:hover ~ .head:before {
  top: 60px;
}
.move.bottom:hover ~ .head .ear {
  top: 120px;
}
.move.bottom:hover ~ .head .face {
  top: 115px;
}
.move.bottom:hover ~ .head .face .eye:after {
  top: 28px;
}
.move.bottom:hover ~ .head .beard {
  bottom: -40px;
}
.move.left:hover ~ .head .ear {
  left: -23px;
}
.move.left:hover ~ .head .ear + .ear {
  left: auto;
  right: -33px;
}
.move.left:hover ~ .head .face {
  left: 45%;
}
.move.left:hover ~ .head .face .eye:after {
  left: 40%;
}
.move.left:hover ~ .head .face .eye + .eye:after {
  left: 45%;
}
.move.right:hover ~ .head .ear {
  left: -33px;
}
.move.right:hover ~ .head .ear + .ear {
  left: auto;
  right: -23px;
}
.move.right:hover ~ .head .face {
  left: 55%;
}
.move.right:hover ~ .head .face .eye:after {
  left: 55%;
}
.move.right:hover ~ .head .face .eye + .eye:after {
  left: 60%;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg