纯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;
  right: 4vw;
  width: 3vw;
  height: 2vw;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform: skewX(20deg) skewY(20deg);
  border-left: 0.3vw solid transparent;
  border-top: 0.2vw solid #ECE8D6;
  background-image: linear-gradient(to bottom, #1a156e 0.5vw, #070437);
}
.hair-i:nth-of-type(6) {
  top: 6.7vw;
  right: 5.4vw;
  width: 5.5vw;
  height: 4vw;
  transform: skewX(-35deg);
  background-color: #070437;
  z-index: 200;
}
.hair-i:nth-of-type(7) {
  top: 8.8vw;
  right: 6vw;
  width: 3vw;
  height: 4vw;
  z-index: 300;
  transform: skewX(30deg);
  background-color: #070437;
}
.hair-i:nth-of-type(8) {
  top: 8.8vw;
  right: 8.9vw;
  width: 4vw;
  height: 2.2vw;
  transform: skewX(-35deg);
  background-color: #070437;
  z-index: 300;
}

.neck {
  position: absolute;
  top: 18.5vw;
  right: 15.1vw;
  width: 13.8vw;
  height: 7.5vw;
  z-index: 1;
}
.neck-i {
  position: absolute;
  transform-origin: bottom right;
}
.neck-i:nth-of-type(1) {
  bottom: 0;
  right: 0.5vw;
  width: 10.5vw;
  height: 9vw;
  transform: skewX(-15deg);
  background-image: linear-gradient(to left, #ECE8D6 0.1vw, #E1006D 0.1vw, #9d0654 0.1vw);
}
.neck-i:nth-of-type(2) {
  bottom: 0;
  left: 0;
  width: 10.5vw;
  height: 9vw;
  transform: skewX(-30deg);
  background-image: linear-gradient(to right, #8e054c, #a70659 55%, #E1006D 55%);
  overflow: hidden;
}
.neck-i:nth-of-type(2)::before {
  content: '';
  position: absolute;
  bottom: 0vw;
  left: 1vw;
  border-bottom: 4vw solid #dc006b;
  border-top: 1vw solid transparent;
  border-left: 1.6vw solid transparent;
  border-right: 5vw solid transparent;
  z-index: 100;
}
.neck-i:nth-of-type(2)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -1.5vw;
  border-top: 9vw solid rgba(236, 232, 214, 0.8);
  border-bottom: 1vw solid transparent;
  border-left: 1.6vw solid transparent;
  border-right: 3vw solid transparent;
}

.fc {
  position: absolute;
  right: 7vw;
  top: 6.5vw;
  width: 21vw;
  height: 17vw;
  z-index: 200;
}
.fc-i {
  position: absolute;
  transform-origin: top left;
  /**/
  /**/
  /**/
  /**/
  /**/
}
.fc-i:nth-of-type(1) {
  top: 2.6vw;
  right: 6.6vw;
  border-top: 10vw solid #070437;
  border-bottom: 1vw solid transparent;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
  transform: scale(0.2) skewX(10deg) rotateZ(-40deg);
  z-index: 200;
}
.fc-i:nth-of-type(2) {
  top: 1.4vw;
  right: 7.1vw;
  width: 0.9vw;
  height: 0.9vw;
  transform: rotateZ(10deg);
  background-color: #070437;
  z-index: 200;
}
.fc-i:nth-of-type(3) {
  top: 1.6vw;
  right: 4.8vw;
  width: 2.3vw;
  height: 0.7vw;
  transform: rotateZ(40deg);
  background-image: linear-gradient(12deg, #070437 55%, transparent 55%);
  z-index: 200;
}
.fc-i:nth-of-type(4) {
  top: 3.3vw;
  right: 5.8vw;
  border-top: 1.5vw solid #070437;
  border-bottom: 1vw solid transparent;
  border-left: 0.2vw solid transparent;
  border-right: 0.2vw solid transparent;
  transform: rotateZ(-20deg);
  z-index: 200;
}
.fc-i:nth-of-type(5) {
  top: 2vw;
  right: 7.5vw;
  width: 1.6vw;
  height: 2vw;
  background-color: #a70659;
  transform: skewX(40deg) skewY(0deg) rotateZ(30deg);
}
.fc-i:nth-of-type(6) {
  top: 3.5vw;
  right: 7vw;
  border-top: 3vw solid #a70659;
  border-bottom: 1vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(-50deg);
}
.fc-i:nth-of-type(7) {
  top: 3.8vw;
  right: 7vw;
  border-top: 2.6vw solid #a70659;
  border-bottom: 1vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(-30deg);
}
.fc-i:nth-of-type(8) {
  top: 2.5vw;
  right: 12.4vw;
  border-top: 2vw solid #a70659;
  border-bottom: 1vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(-65deg) skewY(-30deg);
}
.fc-i:nth-of-type(9) {
  top: 3.5vw;
  right: 10.4vw;
  border-top: 2vw solid #a70659;
  border-bottom: 1vw solid transparent;
  border-left: 0.4vw solid transparent;
  border-right: 0.4vw solid transparent;
  transform: rotateZ(15deg) skewY(-40deg);
}
.fc-i:nth-of-type(10) {
  top: 3vw;
  right: 7.4vw;
  border-top: 2vw solid #a70659;
  border-bottom: 1vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(140deg);
}
.fc-i:nth-of-type(11) {
  top: 8.5vw;
  right: 10.8vw;
  border-top: 3vw solid #C30065;
  border-bottom: 1vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(55deg);
}
.fc-i:nth-of-type(12) {
  top: 0.6vw;
  right: 4vw;
  width: 4.2vw;
  height: 1vw;
  background-color: #a70659;
  transform: skewX(-35deg);
}
.fc-i:nth-of-type(12)::before {
  content: '';
  position: absolute;
  bottom: -.1vw;
  left: 0.9vw;
  height: 80%;
  width: 30%;
  background-color: #ECE8D6;
  z-index: 200;
  transform: rotateZ(-20deg);
}
.fc-i:nth-of-type(13) {
  top: 1.2vw;
  right: 7.8vw;
  width: 1vw;
  height: 2.5vw;
  background-color: #a70659;
  transform: skewY(35deg);
}
.fc-i:nth-of-type(14) {
  top: 6vw;
  right: 12vw;
  width: 1vw;
  height: 1vw;
  background-color: #070437;
  transform: skewY(-30deg) rotateZ(-25deg);
  z-index: 200;
}
.fc-i:nth-of-type(15) {
  top: 5.3vw;
  right: 12vw;
  width: 1.2vw;
  height: 1.2vw;
  background-color: #070437;
  transform: skewY(-30deg) rotateZ(-20deg);
  z-index: 200;
}
.fc-i:nth-of-type(16) {
  top: 4vw;
  right: 11.3vw;
  width: 1vw;
  height: 1.8vw;
  background-color: #070437;
  transform: skewY(20deg) rotateZ(50deg);
  z-index: 200;
}
.fc-i:nth-of-type(17) {
  top: 3.4vw;
  right: 12.6vw;
  width: 0.6vw;
  height: 1.5vw;
  background-color: #070437;
  transform: skewX(20deg) rotateZ(30deg);
  z-index: 200;
}
.fc-i:nth-of-type(18) {
  top: 2.5vw;
  right: 11vw;
  width: 3vw;
  height: 1.2vw;
  background-color: #070437;
  transform: skewX(-20deg) rotateZ(40deg);
  z-index: 200;
}
.fc-i:nth-of-type(19) {
  top: 2.4vw;
  right: 12.7vw;
  width: 1vw;
  height: 1.1vw;
  border-left: 0.2vw solid #ECE8D6;
  transform: skewX(-30deg) rotateZ(59deg);
  background-image: linear-gradient(to right, #1a156e, #070437);
  border-top-left-radius: 50%;
  z-index: 200;
}
.fc-i:nth-of-type(20) {
  top: 6.3vw;
  right: 12.2vw;
  width: 0.8vw;
  height: 0.8vw;
  transform: rotateZ(30deg) skewY(-10deg);
  background-color: #F0EDD8;
  z-index: 100;
}
.fc-i:nth-of-type(21) {
  top: 5.6vw;
  right: 12.2vw;
  width: 0.8vw;
  height: 0.8vw;
  transform: rotateZ(60deg) skewY(-10deg);
  background-color: #F0EDD8;
  z-index: 100;
}
.fc-i:nth-of-type(22) {
  top: 5.1vw;
  right: 12.4vw;
  width: 0.8vw;
  height: 1vw;
  transform: rotateZ(60deg) skewY(0deg);
  background-color: #F0EDD8;
  z-index: 100;
}
.fc-i:nth-of-type(23) {
  top: 4.5vw;
  right: 12.6vw;
  width: 1vw;
  height: 1.2vw;
  transform: rotateZ(60deg) skewY(0deg);
  background-color: #F0EDD8;
  z-index: 100;
}
.fc-i:nth-of-type(24) {
  top: 3.8vw;
  right: 12.5vw;
  width: 1vw;
  height: 2.5vw;
  transform: rotateZ(80deg) skewY(20deg);
  background-color: #F0EDD8;
  z-index: 100;
}
.fc-i:nth-of-type(25) {
  top: 5vw;
  right: 12vw;
  width: 3vw;
  height: 3.9vw;
  transform: skewX(-30deg);
  border-bottom-right-radius: 2vw;
  background-color: #a70659;
  border-left: 0.2vw solid #ECE8D6;
}
.fc-i:nth-of-type(26) {
  top: 7.7vw;
  right: 15vw;
  width: 2vw;
  height: 0.5vw;
  transform: skewX(30deg);
  background-color: #F0EDD8;
}
.fc-i:nth-of-type(27) {
  top: 7vw;
  right: 16.2vw;
  width: 1vw;
  height: 1vw;
  transform: skewX(40deg);
  background-color: #F0EDD8;
  z-index: 100;
}
.fc-i:nth-of-type(28) {
  top: 7.2vw;
  right: 15.8vw;
  border-top: 1vw solid #F0EDD8;
  border-bottom: 1vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(180deg);
}
.fc-i:nth-of-type(29) {
  top: 7.2vw;
  right: 16.2vw;
  border-top: 1vw solid #F0EDD8;
  border-bottom: 1vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(180deg);
}
.fc-i:nth-of-type(30) {
  top: 7.2vw;
  right: 16.2vw;
  height: 1.8vw;
  width: 1.8vw;
  background-color: #a70659;
  border-top-left-radius: 50%;
  border-top-right-radius: 40%;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 40%;
  transform: skewX(-10deg);
  border-left: 0.1vw solid #ECE8D6;
  z-index: 200;
}
.fc-i:nth-of-type(30)::before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1vw;
  width: 1vw;
  background-color: #a70659;
}
.fc-i:nth-of-type(30)::before {
  content: '';
  position: absolute;
  left: 0.3vw;
  bottom: -.3vw;
  height: 0.5vw;
  width: 0.9vw;
  background-color: #a70659;
  transform: skewX(40deg);
  border-left: 0.1vw solid #ECE8D6;
}
.fc-i:nth-of-type(31) {
  top: 6.4vw;
  right: 13vw;
  width: 1vw;
  height: 0.5vw;
  background-color: #F0EDD8;
  transform: rotateZ(50deg) skewY(5deg);
}
.fc-i:nth-of-type(32) {
  top: 5.8vw;
  right: 13.4vw;
  width: 1.1vw;
  height: 0.5vw;
  background-color: #F0EDD8;
  transform: rotateZ(70deg) skewY(-20deg);
}
.fc-i:nth-of-type(33) {
  top: 6.3vw;
  right: 14.1vw;
  border-top: 0.7vw solid #F0EDD8;
  border-bottom: 0.7vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(230deg);
}
.fc-i:nth-of-type(34) {
  top: 6vw;
  right: 14.4vw;
  border-top: 0.7vw solid #F0EDD8;
  border-bottom: 0.7vw solid transparent;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  transform: rotateZ(230deg);
}
.fc-i:nth-of-type(35) {
  top: 4.8vw;
  right: 14.5vw;
  width: 1vw;
  height: 0.5vw;
  background-color: #F0EDD8;
  transform: rotateZ(50deg) skewY(-10deg);
}
.fc-i:nth-of-type(36) {
  top: 15vw;
  right: 11vw;
  border-top: 4vw solid #a70659;
  border-bottom: 4vw solid transparent;
  border-left: 0.4vw solid transparent;
  border-right: 0.4vw solid transparent;
  transform: skewY(-30deg);
}
.fc-i:nth-of-type(37) {
  top: 7.7vw;
  right: -.9vw;
  width: 6.5vw;
  height: 2.1vw;
  background-image: linear-gradient(to top, #E1006D, #C30065 50%, #aa0058);
  transform: skewY(-40deg) rotateZ(60deg);
  border-bottom-right-radius: 1vw;
}
.fc-i:nth-of-type(38) {
  top: 10.5vw;
  right: 3.1vw;
  width: 4vw;
  height: 2vw;
  background-image: linear-gradient(-40deg, transparent 0.9vw, #E1006D 0.9vw);
  transform: rotateZ(25deg);
  border-bottom-right-radius: 2vw;
}
.fc-i:nth-of-type(38)::before {
  content: '';
  position: absolute;
  left: 10%;
  bottom: 0.5vw;
  width: 80%;
  height: 2vw;
  background-image: linear-gradient(to bottom, #E1006D, #C30065, #aa0058);
  border-top-left-radius: 1vw;
  border-bottom-right-radius: 2vw;
}

.shirt {
  position: absolute;
  top: 22vw;
  right: 4vw;
  width: 43vw;
  height: 23vw;
}
.shirt-i {
  position: absolute;
  transform-origin: bottom right;
}
.shirt-i:nth-of-type(1) {
  top: 4.5vw;
  right: 3vw;
  width: 25vw;
  height: 10vw;
  transform: skewX(40deg);
  background-image: linear-gradient(40deg, #070437 10vw, #04021f 17vw);
}
.shirt-i:nth-of-type(2) {
  top: 14.5vw;
  right: -.1vw;
  width: 25vw;
  height: 8.5vw;
  transform: skewX(20deg);
  background-image: linear-gradient(to bottom, #070437 60%, #010107);
}
.shirt-i:nth-of-type(3) {
  bottom: 0;
  left: 4vw;
  width: 25vw;
  height: 18.4vw;
  transform: skewX(-5deg);
  background-image: linear-gradient(to bottom, #070437 12vw, #010107);
}
.shirt-i:nth-of-type(4) {
  top: 1vw;
  left: 10vw;
  width: 21vw;
  height: 4vw;
  transform: skewX(-15deg);
  background-color: #070437;
}
.shirt-i:nth-of-type(5) {
  top: -.2vw;
  left: 7.5vw;
  width: 5.8vw;
  height: 4vw;
  transform: skewX(-15deg) rotateZ(-15deg);
  background-image: linear-gradient(to bottom, #ECE8D6 0.75vw, #C30065 0.75vw);
  z-index: 100;
}
.shirt-i:nth-of-type(6) {
  top: -.7vw;
  left: 3vw;
  width: 3.5vw;
  height: 12vw;
  transform: skewX(-25deg) rotateZ(30deg);
  background-image: linear-gradient(-18deg, #C30065 10.55vw, #ECE8D6 10.55vw, #ECE8D6 11.4vw, transparent 11.4vw);
  border-bottom-left-radius: 50%;
  z-index: 100;
}
.shirt-i:nth-of-type(6)::before {
  content: '';
  position: absolute;
  top: 1.1vw;
  left: -.5vw;
  width: 2vw;
  height: 2vw;
  transform: rotateZ(-18deg);
  background-image: linear-gradient(to bottom, #ECE8D6 0.8vw, #C30065 0.8vw);
}
.shirt-i:nth-of-type(6)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1.5vw;
  width: 1.1vw;
  height: 101%;
  background-color: #a70659;
  border-top-left-radius: 50%;
  z-index: 200;
  transform: skewY(45deg);
}
.shirt-i:nth-of-type(7) {
  top: 0.3vw;
  left: 5.5vw;
  width: 3.2vw;
  height: 8.8vw;
  transform: skewX(-25deg) rotateZ(-15deg);
  border-bottom-right-radius: 50%;
  z-index: 100;
  background-image: linear-gradient(to bottom, #ECE8D6 0.8vw, #C30065 0.8vw);
}
.shirt-i:nth-of-type(7)::before {
  content: '';
  position: absolute;
  bottom: -1.75vw;
  left: 0;
  width: 1.5vw;
  height: 2vw;
  background-image: linear-gradient(130deg, #C30065 1.5vw, transparent 1.5v.........完整代码请登录后点击上方下载按钮下载查看