纯css绘制佛莱迪·摩克瑞人物效果-html代码-BFW代码库

代码语言：html

代码描述：纯css绘制佛莱迪·摩克瑞人物效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Generic */
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  background-image: linear-gradient(135deg, #070437, black);
}

.main {
  position: relative;
  width: 60vw;
  height: 45vw;
}

.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(110deg, #04021f 32%, transparent 50%);
  z-index: 4000;
}

.light {
  position: absolute;
  top: 0;
  left: 50vw;
  width: 50vw;
  height: 100vh;
  z-index: 2000;
  transform: skewX(20deg) translate(-30%);
  background-image: linear-gradient(to bottom, rgba(236, 232, 214, 0.15), rgba(236, 232, 214, 0.035), transparent);
  filter: blur(2vw);
  z-index: 5000;
}
@media (max-width: 600px) {
  .light {
    left: 30vw;
    width: 70vw;
  }
}

.micro-a {
  position: absolute;
  top: 10.5vw;
  right: 27vw;
  height: 5vw;
  width: 5vw;
  border-radius: 50%;
  border-top: 0.2vw solid #ECE8D6;
  background-image: linear-gradient(to bottom, #070437, #010107);
  z-index: 50;
}

.micro-b {
  position: absolute;
  top: 12vw;
  right: 30vw;
  height: 2.8vw;
  width: 15vw;
  background-image: linear-gradient(-5deg, #010107, #070437 3.3vw, #ECE8D6 3.3vw, #ECE8D6 3.5vw, transparent 3.5vw);
  border-top-left-radius: 1vw;
  border-bottom-left-radius: 1vw;
}

.face {
  position: absolute;
  right: 7vw;
  top: 6.5vw;
  width: 21vw;
  height: 17vw;
  z-index: 50;
}
.face-i {
  position: absolute;
  transform-origin: bottom right;
}
.face-i:nth-of-type(1) {
  top: 0.1vw;
  right: 1.2vw;
  width: 4vw;
  height: 2.4vw;
  transform: skewX(55deg);
  background-image: linear-gradient(to bottom, #ECE8D6 0.6vw, #E1006D 0.6vw);
  border-right: 0.3vw solid #a70659;
  z-index: 100;
}
.face-i:nth-of-type(2) {
  top: 2.4vw;
  right: -.2vw;
  width: 4.4vw;
  height: 1.6vw;
  transform: skewX(45deg);
  background-image: linear-gradient(45deg, #C30065 0.6vw, #E1006D 0.6vw);
  border-right: 0.3vw solid #a70659;
  z-index: 100;
}
.face-i:nth-of-type(3) {
  top: 4vw;
  right: 0vw;
  width: 4.5vw;
  height: 1.6vw;
  transform: skewX(-10deg);
  background-color: #C30065;
  border-right: 0.3vw solid #a70659;
  z-index: 100;
}
.face-i:nth-of-type(4) {
  top: 5.6vw;
  right: 6.3vw;
  width: 4.5vw;
  height: 9vw;
  transform: skewX(-35deg);
  overflow: hidden;
  background-color: #E1006D;
  z-index: 100;
}
.face-i:nth-of-type(4)::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 100%;
  transform-origin: top right;
  transform: skewY(35deg);
  background-color: #aa0058;
}
.face-i:nth-of-type(4)::after {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 10%;
  width: 30%;
  height: 100%;
  transform-origin: bottom right;
  transform: skewX(-20deg) skewY(-50deg);
  background-color: #aa0058;
}
.face-i:nth-of-type(5) {
  top: 1.7vw;
  right: 9.6vw;
  width: 7vw;
  height: 12.9vw;
  transform: skewX(-30deg);
  overflow: hidden;
  background-color: #E1006D;
}
.face-i:nth-of-type(5)::before {
  content: '';
  position: absolute;
  bottom: 40%;
  right: -20%;
  width: 90%;
  height: 15%;
  transform-origin: top right;
  transform: skewX(-30deg);
  background-color: #C30065;
}
.face-i:nth-of-type(6) {
  top: 0.1vw;
  right: 5.4vw;
  width: 4vw;
  height: 1vw;
  transform: skewX(-40deg);
  border-left: 0.8vw solid #ECE8D6;
  background-image: linear-gradient(to bottom, #ECE8D6 0.6vw, #E1006D 0.6vw);
}
.face-i:nth-of-type(7) {
  top: 1vw;
  right: 8.3vw;
  width: 5.2vw;
  height: 1.5vw;
  transform: skewX(10deg);
  border-top-left-radius: 0.4vw;
  border-top: 0.15vw solid #ECE8D6;
  border-left: 0.2vw solid #ECE8D6;
  background-image: linear-gradient(-45deg, #E1006D 3vw, #ECE8D6 3vw);
  z-index: 100;
}
.face-i:nth-of-type(8) {
  top: 1vw;
  right: 15.4vw;
  width: 4vw;
  height: 11.8vw;
  transform: skewX(-30deg);
  border-top-left-radius: 0.4vw;
  background-color: #E1006D;
}
.face-i:nth-of-type(9) {
  top: 12.2vw;
  right: 16.4vw;
  width: 4.1vw;
  height: 2.5vw;
  transform: skewY(30deg);
  border-top-left-radius: 0.4vw;
  background-image: linear-gradient(5deg, #ECE8D6 10%, #a70659 10%, #a70659 20%, #8e054c);
}
.face-i:nth-of-type(10) {
  top: 10.4vw;
  right: 17.15vw;
  width: 3.5vw;
  height: 1.9vw;
  transform: skewX(20deg);
  border-top-left-radius: 1.1vw;
  border-bottom-left-radius: 0.2vw;
  background-image: linear-gradient(to right, #ECE8D6 15%, #a70659 15%);
}
.face-i:nth-of-type(11) {
  top: 8.5vw;
  right: 16.93vw;
  width: 4vw;
  height: 1.6vw;
  transform: skewY(-20deg);
  border-top-left-radius: 0.4vw;
  background-color: #E1006D;
  border-top-right-radius: 0.5vw;
  background-image: linear-gradient(-30deg, #E1006D 40%, #ECE8D6 40%);
}
.face-i:nth-of-type(12) {
  top: 12.1vw;
  right: 12.3vw;
  width: 4.2vw;
  height: 2.5vw;
  transform: skewX(20deg);
  background-color: #a70659;
}
.face-i:nth-of-type(12)::before {
  content: '';
  position: absolute;
  top: -1.6vw;
  height: 2.5vw;
  width: 5vw;
  background-color: #E1006D;
}
.face-i:nth-of-type(13) {
  top: 1vw;
  right: 5vw;
  width: 4vw;
  height: 1vw;
  background-color: #E1006D;
}

.hair {
  top: 5vw;
  right: 1.5vw;
  position: absolute;
  height: 21vw;
  width: 14vw;
}
.hair-i {
  position: absolute;
  transform-origin: bottom right;
}
.hair-i:nth-of-type(1) {
  top: 1vw;
  right: 2.5vw;
  width: 5.1vw;
  height: 2.4vw;
  transform: skewX(55deg);
  border-bottom-right-radius: 0.5vw;
  background-color: #070437;
}
.hair-i:nth-of-type(2) {
  top: 3.4vw;
  right: 2vw;
  width: 3vw;
  height: 2.4vw;
  transform: skewX(45deg);
  background-color: #070437;
}
.hair-i:nth-of-type(3) {
  top: 0.3vw;
  right: -.9vw;
  width: 19vw;
  height: 17vw;
  transform: rotateZ(-11deg);
  border-top-left-radius: 5.5vw;
  border-top-right-radius: 5.5vw;
  border-bottom-right-radius: 7vw;
  border-bottom: 0.1vw solid #dcd4b3;
  background-image: linear-gradient(to bottom, #070437 60%, #04021f);
}
.hair-i:nth-of-type(4) {
  top: 0vw;
  right: 6vw;
  width: 5.2vw;
  height: 2vw;
  border-top-left-radius: 5vw;
  border-top-right-radius: 5vw;
  border-left: 0.7vw solid #ECE8D6;
  border-top: 0.3vw solid #ECE8D6;
  border-right: 0.3vw solid #070437;
  background-image: linear-gradient(to bottom, #1a156e, #070437);
}
.hair-i:nth-of-type(5) {
  top: 1vw;
 .........完整代码请登录后点击上方下载按钮下载查看