css布局绘制一个时尚女性效果代码-html代码-BFW代码库

css布局绘制一个时尚女性效果代码

代码语言：html

代码描述：css布局绘制一个时尚女性效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #fff 50%, #000 50%);
}
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;
}

.hat-1 {
  width: 40vmin;
  height: 40vmin;
  background: #000;
  top: -70vmin;
  left: -5.5vmin;
  transform: rotate(-15deg);
  border-radius: 15vmin 0 0 20%;
}
.hat-1::before {
  width: 25vmin;
  height: 8.5vmin;
  background: #000;
  top: 30.4vmin;
  left: -9.7vmin;
  transform: rotate(-16deg) skewX(55deg);
  border-radius: 0 0 0 6vmin;
}
.hat-2 {
  width: 14.2vmin;
  height: 10vmin;
  background: #ee1c25;
  top: -60.1vmin;
  left: 60.7vmin;
  transform: rotate(-14deg);
  border-radius: 0 100% 100% 0/100% 15% 85% 0;
}
.hat-2::before {
  width: 5vmin;
  height: 1vmin;
  background: #000;
  top: 0.1vmin;
  left: 11vmin;
  transform: rotate(25deg);
}
.hat-2::after {
  width: 5vmin;
  height: 1vmin;
  background: #000;
  top: 0.5vmin;
  left: 11.8vmin;
  transform: rotate(50deg);
}
.hat-3 {
  width: 7vmin;
  height: 14vmin;
  background: #000;
  top: -58vmin;
  left: 45.5vmin;
  transform: rotate(-16deg);
  border-radius: 0 100% 0 0;
}
.hat-3::before {
  width: 12vmin;
  height: 5vmin;
  background: #000;
  top: 8.5vmin;
  left: 6vmin;
  transform: rotate(-15deg);
}
.hat-3::after {
  width: 8vmin;
  height: 4vmin;
  background: #000;
  top: 7.2vmin;
  left: 11.5vmin;
  transform: rotate(-20deg);
}
.hat-4 {
  width: 8vmin;
  height: 4vmin;
  background: #000;
  top: -64.5vmin;
  left: 74vmin;
  transform: rotate(-42deg);
}
.hat-4::before {
  width: 4vmin;
  height: 2vmin;
  background: #000;
  top: -0.2vmin;
  left: 3vmin;
  transform: rotate(-10deg);
}
.hat-5 {
  z-index: 2;
  width: 15vmin;
  height: 10vmin;
  background: #000;
  top: -45vmin;
  left: -17.5vmin;
  transform: rotate(-38deg);
}

.ear {
  width: 2vmin;
  height: 10vmin;
  background: #fff;
  top: -34vmin;
  left: 43.5vmin;
  transform: rotate(10deg);
  border-radius: 1vmin 1.5vmin 0 0;
}
.ear::before {
  width: 3.3vmin.........完整代码请登录后点击上方下载按钮下载查看