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: #fff;
  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;
}

.circle {
  width: 89.7vmin;
  height: 89.7vmin;
  background: #dd654a;
  top: 3.2vmin;
  left: 10.9vmin;
  border-radius: 50%;
}

.hat-1 {
  width: 33vmin;
  height: 12vmin;
  background: #ac2b2c;
  top: -51vmin;
  left: 6.4vmin;
  border-radius: 57% 43% 0 100%/100% 95% 5% 0;
}
.hat-1::before {
  width: 14vmin;
  height: 4vmin;
  background: #dd654a;
  top: 2.4vmin;
  left: 21.5vmin;
  transform: rotate(40deg);
}
.hat-1::after {
  width: 16.5vmin;
  height: 8.8vmin;
  background: #fff;
  top: 2.2vmin;
  left: 17.7vmin;
  transform: rotate(40deg);
  border-radius: 50%;
}
.hat-2 {
  width: 15vmin;
  height: 8vmin;
  background: #fff;
  top: -51vmin;
  left: 23.4vmin;
  transform: rotate(30deg);
  border-radius: 50%;
}
.hat-2::before {
  width: 3vmin;
  height: 1vmin;
  background: #fff;
  top: 2.1vmin;
  left: -0.65vmin;
  transform: rotate(-64deg);
  border-radius: 50%;
}
.hat-3 {
  width: 68vmin;
  height: 20vmin;
  background: #fff;
  top: -28.2vmin;
  left: 13.4vmin;
  transform: rotate(1deg);
  border-radius: 50%;
}
.hat-3::before {
  width: 12vmin;
  height: 16.4vmin;
  background: #fff;
  top: 4.5vmin;
  left: 58.5vmin;
  transform: rotate(-42deg);
  border-radius: 50%;
}
.hat-3::after {
  width: 7vmin;
  height: 1vmin;
  background: #fff;
  top: 5.5vmin;
  left: 61vmin;
  transform: rotate(28deg);
  border-radius: 50%;
}
.hat-4 {
  width: 12vmin;
  height: 3vmin;
  background: #fff;
  top: -6.2vmin;
  left: 81.4vmin;
  transform: rotate(-60deg);
  border-radius: 50%;
}
.hat-4::before {
  width: 23vmin;
  height: 3vmin;
  background: #fff;
  top: -2.5vmin;
  left: -17.4vmin;
  transform: rotate(18.2deg);
  border-radius: 50%;
}
.hat-4::after {
  width: 28vmin;
  height: 20vmin;
  background: #fff;
  top: -20vmin;
  left: -15vmin;
  transform: rotate(10deg);
  border-radius: 0 0 20% 30%;
}
.hat-5 {
  width: 25vmin;
  height: 35vmin;
  background: #fff;
  top: -7.2vmin;
  left: -44.3vmin;
  transform: rotate(29deg);
  border-radius: 50%;
}

.hair-1 {
  width: 35.5vmin;
  height: 19.2vmin;
  background: #11122e;
  top: -13.9vmin;
  left: 17.8vmin;
  transform: rotate(-5deg) skewX(-11deg);
  border-radius: 50%;
}
.hair-1::before {
  width: 25vmin;
  height: 14vmin;
  background: #11122e;
  top: 0.4vmin;
  left: 11.1vmin;
  transform: rotate(10deg);
  border-radius: 50%;
}
.hair-1::after {
  width: 10vmin;
  height: 18vmin;
  background: #11122e;
  top: 4.8vmin;
  left: 25.8vmin;
  transform: rotate(20deg);
  border-radius: 50%;
}
.hair-2 {
  width: 20vmin;
  height: 30vmin;
  background: #11122e;
  top: 33vmin;
  left: 34.2vmin;
  border-radius: 50%;
}
.hair-2::before {
  width: 10vmin;
  height: 14vmin;
  background: #11122e;
  top: -6vmin;
  left: 9vmin;
  transform: rotate(5deg);
}
.hair-2::after {
  width: 8vmin;
  height: 15vmin;
  background: #fff;
  top: -5.8vmin;
  left: 17.5vmin;
  transform: rotate(2deg);
  border-radius: 50%;
}
.hair-3 {
  width: 2vmin;
  height: 5vmin;
  background: #fff;
  top: -4vmin;
  left: 53.7vmin;
  transform: rotate(20deg);
}
.hair-3::before {
  width: 3vmin;
  height: 15vmin;
  background: #11122e;
  top: 3.8vmin;
  left: -34.9vmin;
  transform: rotate(18deg);
  border-radius: 50%;
}
.hair-3::after {
  width: 30vmin;
  height: 40vmin;
  background: #11122e;
  top: 10vmin;
  left: -39.3vmin;
  transform: rotate(20deg);
}
.hair-4 {
  width: 10vmin;
  height: 10vmin;
  background: #11122e;
  top: -2vmin;
  left: -22vmin;
  transform: rotate(45deg);
  border-radius: 20% 0 0 0;
}
.hair-4::before {
  width: 4vmin;
  height: 12vmin;
  background: #fff;
  top: -2.2vmin;
  left: -2.7vmin;
  transform: rotate(20deg);
  border-radius: 50%;
}
.hair-4::after {
  width: 10vmin;
  height: 25vmin;
  background: #11122e;
  top: 5vmin;
  left: -0.2vmin;
  transform: rotate(-13.8deg);
  border-radius: 50%;
}
.hair-5 {
  width: 23vmin;
  height: 40vmin;
  background: #2b2869;
  top: 40vmin;
  left: -50vmin;
  transform: rotate(41.5deg);
  border-radius: 50%;
}
.hair-5.........完整代码请登录后点击上方下载按钮下载查看