div+css布局绘制戴口罩马尾辫卡通美女侧面上身效果代码-html代码-BFW代码库

div+css布局绘制戴口罩马尾辫卡通美女侧面上身效果代码

代码语言：html

代码描述：div+css布局绘制戴口罩马尾辫卡通美女侧面上身效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  background: #7a5bfe;
  overflow: hidden;
}
html *,
body * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
  content: "";
  position: absolute;
}

.face-1 {
  width: 20vmin;
  height: 33vmin;
  background: #ffa394;
  top: -45vmin;
  left: 46.5vmin;
  border-radius: 0 50% 50% 0;
}
.face-1::before {
  width: 10vmin;
  height: 10vmin;
  background: #ffa394;
  top: 24vmin;
  left: 11vmin;
  transform: rotate(-30deg);
}
.face-1::after {
  width: 3vmin;
  height: 6vmin;
  background: #7a5bfe;
  top: 22.8vmin;
  left: 19.6vmin;
  transform: rotate(-40deg);
  border-radius: 52% 0 0 0;
}
.face-2 {
  z-index: 2;
  width: 10vmin;
  height: 10vmin;
  background: #ffa394;
  top: -22vmin;
  left: 30vmin;
  transform: rotate(-40deg);
  border-radius: 50% 0 0 0;
}
.face-2::before {
  width: 15vmin;
  height: 15vmin;
  background: #ffa394;
  top: 5.5vmin;
  left: -4.3vmin;
  transform: rotate(-10deg);
  border-radius: 50% 0 0 0;
}
.face-2::after {
  width: 15vmin;
  height: 17vmin;
  background: #ffa394;
  top: 3vmin;
  left: -3.3vmin;
  transform: rotate(58deg);
  border-radius: 50% 0 0 50%;
}
.face-3 {
  z-index: 2;
  width: 2vmin;
  height: 5.2vmin;
  background: #ffa394;
  top: 4vmin;
  left: 29.6vmin;
  transform: rotate(-47deg);
  border-radius: 20% 0 0 0;
}
.face-3::before {
  width: 8vmin;
  height: 8vmin;
  background: #ffa394;
  top: -10vmin;
  left: 2.1vmin;
  transform: rotate(-10deg);
}

.hair-1 {
  z-index: 3;
  width: 35vmin;
  height: 22.2vmin;
  background: #111542;
  top: -61.5vmin;
  left: 28.9vmin;
  transform: rotate(5deg);
  border-radius: 50%;
}
.hair-1::before {
  width: 33.5vmin;
  height: 16.9vmin;
  background: #111542;
  top: 7.65vmin;
  left: 1.4vmin;
  transform: rotate(-15.8deg);
  border-radius: 50%;
}
.hair-1::after {
  width: 35.5vmin;
  height: 20vmin;
  background: #111542;
  top: -0.35vmin;
  left: -1.7vmin;
  transform: rotate(-1deg);
  border-radius: 50%;
}
.hair-2 {
  width: 35.3vmin;
  height: 43vmin;
  background: #111542;
  top: -46.6vmin;
  left: -29.8vmin;
  transform: rotate(-19deg);
  border-radius: 44% 50% 50% 50%;
}
.hair-2::before {
  width: 28vmin;
  height: 31vmin;
  background: #111542;
  top: -1vmin;
  left: 5.1vmin;
  transform: rotate(-50deg);
  border-radius: 50%;
}
.hair-2::after {
  width: 15.2vmin;
  height: 5.2vmin;
  background: #111542;
  top: -0.15vmin;
  left: 9.4vmin;
  transform: rotate(-0.2deg);
  border-radius: 50%;
}
.hair-3 {
  width: 12vmin;
  height: 30vmin;
  background: #7a5bfe;
  top: -32vmin;
  left: -18vmin;
}
.hair-3::before {
  width: 7.8vmin;
  height: 8.5vmin;
  background: #7a5bfe;
  top: -3.75vmin;
  left: -0.65vmin;
  transform: rotate(11deg) skewX(-25deg) skewY(-4deg);
  border-radius: 52% 0 0 40%;
}
.hair-3::after {
  width: 10vmi.........完整代码请登录后点击上方下载按钮下载查看