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

代码语言：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: 10vmin;
  height: 18vmin;
  background: #7a5bfe;
  top: -0.25vmin;
  left: -3.25vmin;
  transform: rotate(-11deg) skewY(-10deg);
  border-radius: 50%;
}
.hair-4 {
  width: 12vmin;
  height: 13.3vmin;
  background: #111542;
  top: -28.5vmin;
  left: -32.2vmin;
  transform: rotate(-20deg) skewY(5deg) skewX(6deg);
  border-radius: 50%;
}
.hair-4::before {
  width: 2vmin;
  height: 8vmin;
  background: #111542;
  left: 9.9vmin;
  transform: rotate(-2deg);
  border-radius: 0 0 30% 0;
}
.hair-4::after {
  width: 8vmin;
  height: 5vmin;
  background: #111542;
  top: 8.35vmin;
  left: 1vmin;
  transform: rotate(8deg);
  border-radius: 50%;
}
.hair-5 {
  width: 5.4vmin;
  height: 10.5vmin;
  background: #7a5bfe;
  top: -38.1vmin;
  left: -29vmin;
  transform: rotate(-24deg);
  border-radius: 50%;
}
.hair-5::before {
  width: 5vmin;
  height: 7vmin;
  background: #7a5bfe;
  top: 3.4vmin;
  left: -0.4vmin;
  transform: skewY(14deg) skewX(1deg);
  border-radius: 50%;
}
.hair-5::after {
  width: 2.7vmin;
  height: 9vmin;
  background: #7a5bfe;
  top: -0.55vmin;
  left: -0.2vmin;
  transform: rotate(10deg);
  border-radius: 50%;
}
.hair-6 {
  width: 14.5vmin;
  height: 32vmin;
  background: #111542;
  top: -1vmin;
  left: -40vmin;
  transform: rotate(1deg);
  border-radius: 50%;
}
.hair-6::before {
  width: 24vmin;
  height: 25.7vmin;
  background: #111542;
  top: 8vmin;
  left: -10.1vmin;
  border-radius: 50%;
}
.hair-6::after {
  width: 10.8vmin;
  height: 4vmin;
  background: #111542;
  top: 29vmin;
  left: 0.35vmin;
  transform: rotate(-21deg);
  border-radius: 50%;
}
.hair-7 {
  width: 8.5vmin;
  height: 18vmin;
  background: #111542;
  top: 7.5vmin;
  left: -66.8vmin;
  transform: rotate(-2deg);
  border-radius: 50%;
}
.hair-7::before {
  width: 12.6vmin;
  height: 15vmin;
  background: #7a5bfe;
  top: -3.7vmin;
  left: 0vmin;
  border-radius: 50%;
}
.hair-7::after {
  width: 10.3vmin;
  height: 9.8vmin;
  background: #7a5bfe;
  top: 1.45vmin;
  left: 1.8vmin;
  border-radius: 50%;
}
.hair-8 {
  width: 9.7vmin;
  height: 8vmin;
  background: #111542;
  top: -0.1vmin;
  left: -60vmin;
  transform: rotate(-18deg);
  border-radius: 50%;
}
.hair-8::before {
  width: 10vmin;
  height: 8.7vmin;
  background: #111542;
  top: -0.9vmin;
  left: -0.4vmin;
  border-radius: 50%;
}
.hair-8::after {
  width: 8vmin;
  height: 9vmin;
  background: #111542;
  top: -2.9vmin;
  left: 5vmin;
  transform: rotate(18deg);
  border-radius: 30% 0 0 0;
}
.hair-9 {
  width: 5.45vmin;
  height: 5.1vmin;
  background: #7a5bfe;
  top: -3.85vmin;
  left: -63.3vmin;
  transform: skewX(-15deg);
  border-radius: 50%;
}
.hair-9::before {
  width: 2vmin;
  height: 8vmin;
  background: #7a5bfe;
  top: -4.6vmin;
  left: 3.05vmin;
  transform: rotate(-16deg);
  border-radius: 50%;
}
.hair-9::after {
  width: 7vmin;
  height: 5vmin;
  background: #7a5bfe;
  top: -3.5vmin;
  left: -3vmin;
  transform: rotate(-20deg) skewY(-3deg);
}
.hair-10 {
  width: 1vmin;
  height: 3vmin;
  background: #7a5bfe;
  top: -5.3vmin;
  left: -70vmin;
  transform: rotate(50deg);
}
.hair-10::before {
  width: 7vmin;
  height: 28vmin;
  background: #111542;
  top: -26vmin;
  left: -8vmin;
  transform: rotate(-67.7deg);
  border-radius: 50%;
}
.hair-10::after {
  width: 4vmin;
  height: 16vmin;
  background: #111542;
  top: -21.65vmin;
  left: -13.4vmin;
  transform: rotate(-60deg);
  border-radius: 50%;
}
.hair-11 {
  z-index: 1;
  width: 24vmin;
  height: 35vmin;
  background: #111542;
  top: -40vmin;
  left: 4.5vmin;
  transform: rotate(1deg);
  border-radius: 50%;
}
.hair-11::before {
  width: 3.5vmin;
  height: 12vmin;
  background: #111542;
  top: 0.1vmin;
  left: 2.85vmin;
  transform: rotate(27deg);
  border-radius: 50%;
}
.hair-11::after {
  width: 5vmin;
  height: 7vmin;
  background: #111542;
  top: 0.3vmin;
  left: 3.9vmin;
  transform: rotate(23.5deg);
}
.hair-12 {
  z-index: 1;
  width: 15vmin;
  height: 4.3vmin;
  background: #111542;
  top: -6.15vmin;
  left: 4.4vmin;
  transform: rotate(28deg);
  border-radius: 50%;
}
.hair-12::before {
  width: 10vmin;
  height: 12.5vmin;
  background: #111542;
  top: -4vmin;
  left: 7vmin;
}
.hair-12::after {
  width: 9vmin;
  height: 6vmin;
  background: #7a5bfe;
  top: 4.3vmin;
  left: 5vmin;
  transform: skewX(27deg);
  border-radius: 0 45% 0 0;
}
.hair-13 {
  z-index: 2;
  width: 15vmin;
  height: 20vmin;
  background: #111542;
  top: -20vmin;
  left: 38.7vmin;
  transform: skewY(-5.5deg);
  border-radius: 50%;
}
.hair-13::before {
  width: 6vmin;
  height: 3vmin;
  background: #111542;
  top: -0.4vmin;
  transform: rotate(-20deg);
}
.hair-13::after {
  width: 7vmin;
  height: 18vmin;
  background: #111542;
  top: 5vmin;
  left: 0.6vmin;
  transform: rotate(-15deg);
  border-radius: 50%;
}
.hair-14 {
  z-index: 2;
  width: 13.5vmin;
  height: 18vmin;
  background: #ffa394;
  top: -19vmin;
  left: 40.3vmin;
  transform: skewY(-4deg);
  border-radius: 50%;
}
.hair-14::before {
  width: 6vmin;
  height: 18vmin;
  background: #ffa394;
  top: 5vmin;
  left: 0.4vmin;
  transform: rotate(-10deg);
  border-radius: 50%;
}
.hair-14::after {
  width: 11vmin;
  height: 25vmin;
  background: #ffa394;
  top: -4vmin;
  left: 5vmin;
}

.hair-band {
  z-index: 3;
  width: 6.65vmin;
  height: 1.8vmin;
  background: #ffda1a;
  top: -72.15vmin;
  left: -9.6vmin;
  transform: rotate(-53deg);
  border-radius: 1vmin;
}

.ear-1 {
  z-index: 3;
  width: 7vmin;
  height: 13vmin;
  background: #ffa394;
  top: -18.5vmin;
  left: 15.5vmin;
  transform: rotate(-27deg);
  border-radius: 50%;
}
.ear-1::before {
  width: 7.1vmin;
  height: 8.4vmin;
  background: #ffa394;
  top: -0.7vmin;
  left: 0.8vmin;
  transform: skewY(-2deg);
  border-radius: 50%;
}
.ear-1::after {
  width: 3.4vmin;
  height: 5vmin;
  background: #eb8e7f;
  top: 5.2vmin;
  left: 1.5vmin;
  transform: rotate(-20deg);
  border-radius: 0 0 1.2vmin 2vmin;
}
.ear-2 {
  z-index: 3;
  width: 5vmin;
  height: 5vmin;
  background: #eb8e7f;
  top: -26vmin;
  left: 15.3vmin;
  border-radius: 0 100% 0 0;
}
.ear-2::before {
  width: 2.5vmin;
  height: 3vmin;
  background: #eb8e7f;
  top: 3.9vmin;
  left: 2.8vmin;
  transform: rotate(60deg);
  border-radius: 0 100% 0 0;
}
.ear-2::after {
  width: 2vmin;
  height: 3vmin;
  background: #eb8e7f;
  top: 5.4vmin;
  left: 2.6vmin;
  transform: rotate(-30deg);
}
.ear-3 {
  z-index: 3;
  width: 3.5vmin;
  height: 7.5vmin;
  background: #ffa394;
  top: -22.5vmin;
  left: 13.2vmin;
  border-radius: 0 70% 40% 0;
}
.ear-3::before {
  width: 3vmin;
  height: 2vmin;
  background: #ffa394;
  top: 5.9vmin;
  transform: rotate(-20deg);
  border-radius: 50%;
}
.ear-3::after {
  width: 2vmin;
  height: 1vmin;
  background: #ffa394;
  top: -0.15vmin;
  transform: rotate(10deg);
  border-radius: 50%;
}
.ear-4 {
  z-index: 3;
  width: 0.5vmin;
  height: 2vmin;
  background: #ffa394;
  top: -19.8vmin;
  left: 20.2vmin;
  transform: rotate(25deg);
  border-radius: 50%;
}
.ear-4::before {
  width: 1vmin;
  height: 0.5vmin;
  background: #ffa394;
  top: 1.75vmin;
  left: 0.05vmin;
  transform: rotate(30deg);
  border-radius: 50%;
}
.ear-4::after {
  width: 0.8vmin;
  height: 1.9vmin;
  background: #ffa394;
  top: -3.1vmin;
  left: -6.7vmin;
  transform: rotate(40deg);
  border-radius: 0 0 0 50%;
}

.earring {
  z-index: 3;
  width: 0.95vmin;
  height: 0.95vmin;
  background: #ffda1a;
  top: -8.9vmin;
  left: 19.15vmin;
  border-radius: 50%;
}
.earring::before {
  width: 0.3vmin;
  height: 0.3vmin;
  background: #fcffff;
  top: 0.1vmin;
  left: 0.35vmin;
  border-radius: 50%;
}

.eyebrow-1 {
  z-index: 2;
  width: 9vmin;
  height: 4vmin;
  background: #121741;
  top: -34.45vmin;
  left: 51.3vmin;
  transform: rotate(-10deg) skewX(12deg);
  border-radius: 0 5vmin 0 0;
}
.eyebrow-1::before {
  width: 4.5vmin;
  height: 2vmin;
  background: #ffa394;
  top: -1.7vmin;
  left: -0.7vmin;
  transform: rotate(-9deg);
}
.eyebrow-1::after {
  width: 9.2vmin;
  height: 5.3vmin;
  background: #ffa394;
  top: 0.45vmin;
  left: -0.4vmin;
  transform: rotate(2deg);
  border-radius: 0 5vmin 0 0;
}
.eyebrow-2 {
  z-index: 2;
  width: 5vmin;
  height: 2vmin;
  background: #ffa394;
  top: -33.9vmin;
  left: 57.5vmin;
  transform: rotate(13.5deg);
  border-radius: 0 100% 0 0;
}
.eyebrow-2::before {
  width: 2vmin;
  height: 4vmin;
  background: #ffa394;
  top: -0.5vmin;
  left: 2.5vmin;
  transform: rotate(-78deg);
  border-radius: 0 10% 0 0;
}

.eye-1 {
  z-index: 3;
  width: 6vmin;
  height: 4vmin;
  background: #eb8e7f;
  top: -29.5vmin;
  left: 52vmin;
  transform: rotate(-33deg);
  border-radius: 0 40% 1.5vmin 40%;
}
.eye-1::before {
  width: 5vmin;
  height: 2.5vmin;
  background: #eb8e7f;
  top: -0.1vmin;
  left: -2.5vmin;
  transform: rotate(33deg);
  border-radius: 0 0 0 100%;
}
.eye-1::after {
  width: 2vmin;
  height: 6vmin;
  background: #ffa394;
  top: -1vmin;
  left: -1.8vmin;
  transform: rotate(-38deg);
  border-radius: 0 0 0 50%;
}
.eye-2 {
  z-index: 3;
  width: 3vmin;
  height: 1vmin;
  background: #ffa394;
  top: -29.9vmin;
  left: 42.5vmin;
  transform: rotate(-22deg);
  border-radius: 0 0 10% 100%;
}
.eye-2::before {
  width: 2vmin;
  height: 1vmin;
  background: #ffa394;
  left: -0.2vmin;
  transform: rotate(-40deg);
}
.eye-2::after {
  width: 4vmin;
  height: 2.5vmin;
  background: #111542;
  top: 2.1vmin;
  left: 4.7vmin;
  transform: rotate(-3deg) skewX(15deg);
  border-radius: 0 0.9vmin 0 0;
}
.eye-3 {
  z-index: 3;
  width: 4.5vmin;
  height: 1.2vmin;
  background: #111542;
  top: -27.75vmin;
  left: 48.7vmin;
  transform: rotate(-10deg);
}
.eye-3::before {
  width: 3.2vmin;
  height: 0.5vmin;
  background: #eb8e7f;
  top: -0.4vmin;
  left: -0.15vmin;
  border-radius: 50%;
}
.eye-3::after {
  width: 3vmin;
  height: 2vmin;
  background: #ffa394;
  top: 0.7vmin;
  left: -0.8vmin;
  transform: rotate(32deg);
  border-radius: 0 50% 0 0;
}
.eye-4 {
  z-index: 3;
  width: 4.4vmin;
  height: 1.4vmin;
  background: #111542;
  top: -25.8vmin;
  left: 51vmin;
  transform: rotate(15deg);
  border-radius: 0 0 0 100%;
}
.eye-4::before {
  width: 1.5vmin;
  height: 0.5vmin;
  background: #111542;
  top: 0.3vmin;
  left: -0.15vmin;
  transform: rotate(14deg);
}
.eye-4::after {
  width: 2vmin;
  height: 1.5vmin;
  background: #ffa394;
  top: -1.5vmin;
  left: 4.2vmin;
  transform: rotate(-10deg);
}
.eye-5 {
  z-index: 3;
  width: 4vmin;
  height: 2.65vmin;
  background: #ffffff;
  top: -25.4vmin;
  left: 54vmin;
  transform: skewX(40deg);
  border-radius: 0 0 0 100%;
}
.eye-5::before {
  width: 2.5vmin;
  height: 2.4vmin;
  background: #ffa394;
  top: 0.4vmin;
  left: 2.7vmin;
  transform: rotate(10deg) skewX(-40deg);
}
.eye-5::after {
  width: 3vmin;
  height: 0.5vmin;
  background: #111542;
  top: -0.2vmin;
  left: -0.1vmin;
  transform: rotate(-6deg);
  border-radius: 0 0 100% 0;
}
.eye-6 {
  z-index: 3;
  width: 2.5vmin;
  height: 0.4vmin;
  background: #111542;
  top: -28vmin;
  left: 51.5vmin;
  transform: rotate(-13deg);
  border-radius: 50%;
}
.eye-6::before {
  width: 2vmin;
  height: 0.5vmin;
  background: #111542;
  top: -0.1vmin;
  left: 0.7vmin;
  transform: rotate(1deg);
}
.eye-6::after {
  width: 1.5vmin;
  height: 0.45vmin;
  background: #111542;
  top: 0.45vmin;
  left: 3.8vmin;
  transform: rotate(12deg);
  border-radius: 50%;
}
.eye-7 {
  z-index: 3;
  width: 1.25vmin;
  height: 3.3vmin;
  background: #111542;
  top: -26.6vmin;
  left: 55.8vmin;
  transform: rotate(1deg);
  border-radius: 0 0 60% 28%;
}
.eye-7::before {
  width: 0.4vmin;
  height: 0.65vmin;
  background: #8c95e0;
  top: 0.95vmin;
  left: 0.45vmin;
  border-radius: 50%;
}
.eye-7::after {
  width: 0.4vmin;
  height: 1.5vmin;
  background: #111542;
  top: 2.1vmin;
  left: 0.6vmin;
  transform: rotate(15deg);
  border-radius: 50%;
}
.eye-8 {
  z-index: 3;
  width: 2vmin;
  height: 0.9vmin;
  background: #111542;
  top: -22.65vmin;
  left: 55.6vmin;
  border-radius: 0 100% 0 0;
}
.eye-8::before {
  width: 2vmin;
  height: 0.8vmin;
  background: #ffa394;
  top: 0.15vmin;
  border-radius: 0 100% 0 0;
}
.eye-8::after {
  width: 2.5vmin;
  height: 0.2vmin;
  background: #ffa394;
  top: 0.8vmin;
  left: -0.3vmin;
  transform: rotate(-2deg);
  border-radius: 0 0 100% 100%;
}
.eye-9 {
  z-index: 3;
  width: 2.3vmin;
  height: 1.8vmin;
  background: #111542;
  top: -30.6vmin;
  left: 61vmin;
  .........完整代码请登录后点击上方下载按钮下载查看