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%;
  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;
}

.hair-1 {
  width: 20vmin;
  height: 21.3vmin;
  background: #000;
  top: -33.8vmin;
  left: -17.7vmin;
  transform: rotate(-3deg);
  border-radius: 13vmin 0 0 0.5vmin;
}
.hair-1::before {
  width: 10vmin;
  height: 7vmin;
  background: #000;
  top: -0.2vmin;
  left: 12.5vmin;
  transform: rotate(-42deg);
  border-radius: 0 4vmin 0 0;
}
.hair-1::after {
  width: 5vmin;
  height: 5vmin;
  background: #000;
  top: 2.4vmin;
  left: 19vmin;
  transform: rotate(3deg);
}
.hair-2 {
  width: 2.5vmin;
  height: 2vmin;
  background: #fff;
  top: -58.2vmin;
  left: -5.8vmin;
  transform: rotate(-20deg);
}
.hair-2::before {
  width: 0.5vmin;
  height: 2vmin;
  background: #fff;
  top: 1.2vmin;
  left: 2.1vmin;
  transform: rotate(-30deg);
  border-radius: 0 0 30% 40%;
}
.hair-2::after {
  width: 2vmin;
  height: 2vmin;
  background: #fff;
  left: 0.6vmin;
  transform: rotate(20deg);
}
.hair-3 {
  width: 15vmin;
  height: 15vmin;
  background: #000;
  top: -33.5vmin;
  left: 4.2vmin;
  transform: rotate(10deg);
  border-radius: 0 9vmin 0 0;
  box-shadow: -0.4vmin -0.8vmin 0 0.1vmin #000;
}
.hair-3::before {
  width: 2vmin;
  height: 4vmin;
  background: #000;
  top: -1.5vmin;
  left: 7.9vmin;
  transform: rotate(-45deg);
}

.face-1 {
  width: 10vmin;
  height: 5vmin;
  background: #000;
  top: -8.5vmin;
  left: -24.1vmin;
  transform: rotate(-8deg);
}
.face-1::before {
  width: 6vmin;
  height: 8vmin;
  background: #000;
  top: 3vmin;
  left: 2.5vmin;
  transform: rotate(-26deg);
}
.face-1::after {
  width: 15vmin;
  height: 10vmin;
  background: #000;
  top: 5.5vmin;
  left: 5.4vmin;
  transform: rotate(25deg);
}
.face-2 {
  width: 10vmin;
  height: 12.7vmin;
  background: #000;
  top: 7.2vmin;
  left: 6vmin;
  transform: rotate(3deg);
  border-radius: 0 0 10vmin 0;
}
.face-2::before {
  width: 14vmin;
  height: 8vmin;
  background: #fff;
  top: 1vmin;
  left: -9.5vmin;
  border-radius: 0 0 0 10vmin;
}
.face-2::after {
  width: 13.5vmin;
  height: 5vmin;
  background: #fff;
  top: 4.6vmin;
  left: -7.2vmin;
  transform: rotate(12deg);
  border-radius: 50%;
}
.face-3 {
  width: 5vmin;
  height: 2.5vmin;
  background: #fff;
  top: 11.6vmin;
  left: 4.2vmin;
  transform: skewX(-50deg);
  border-radius: 0 0.4vmin 1vmin 5vmin;
}
.face-3::before {
  width: 12vmin;
 .........完整代码请登录后点击上方下载按钮下载查看