css+div绘制不同风格纺织图案衣服效果代码-html代码-BFW代码库

代码语言：html
代码描述：css+div绘制不同风格纺织图案衣服效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html {
        height: 100%;
}

body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
}

.model {
        display: grid;
        width: 25vmin;
        height: 70vmin;
        margin: 15vmin 5vmin;
        filter: drop-shadow(10px 10px 5px #cccccc99);
}

.model.rajesh {
        margin-left: 8vmin;
}

.model.sheldon {
        margin-right: 8vmin;
}

.model > div {
        position: relative;
}

.model:after {
        content: "";
        position: absolute;
        bottom: -8vmin;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1vmin;
        width: 100%;
        text-align: center;
        white-space: pre;
        text-transform: uppercase;
        opacity: 0;
        transition: all 0.5s ease 0s;
}

.model:hover:after {
        opacity: 1;
        font-size: 2.1vmin;
        transition: all 0.5s ease 0s;
}

.model.rajesh:after {
        content: "Rajesh\A Koothrappali";
        text-shadow: 0 0 3px #96834380;
        color: #968343;
}
.model.howard:after {
        content: "Howard\A Wolowitz";
        text-shadow: 0 0 3px #2a85cc80;
        color: #2a85cc;
}
.model.leonard:after {
        content: "Leonard\A Hofstadter";
        text-shadow: 0 0 3px #44af5e80;
        color: #44af5e;
}
.model.sheldon:after {
        content: "Sheldon\A Cooper";
        text-shadow: 0 0 3px #d12b1380;
        color: #d12b13;
}

.model.rajesh:before {
        content: "";
        position: absolute;
        background: #f7f0db;
        width: 10vmin;
        height: 6vmin;
        z-index: 1;
        top: -0.75vmin;
        left: calc(50% - 5vmin);
        clip-path: polygon(
                50% 60%,
                85% 9%,
                92% 5%,
                98% 10%,
                75% 100%,
                50% 60%,
                25% 100%,
                2% 10%,
                8% 5%,
                15% 9%
        );
        background-size: 1vmin 1vmin;
        background-image: repeating-linear-gradient(
                        150deg,
                        rgba(255, 255, 255, 0) 0,
                        rgba(255, 255, 255, 0) calc(1.15vmin - 1px),
                        rgba(0, 0, 0, 0.1) calc(1.15vmin),
                        rgba(255, 255, 255, 0) calc(1.15vmin + 1px)
                ),
                repeating-linear-gradient(
                        31deg,
                        rgba(255, 255, 255, 0) 0,
                        rgba(255, 255, 255, 0) calc(1.15vmin - 1px),
                        rgba(0, 0, 0, 0.1) calc(1.15vmin),
                        rgba(255, 255, 255, 0) calc(1.15vmin + 1px)
                );
}

.model.howard:before {
        content: "";
        position: absolute;
        background: repeating-linear-gradient(
                        90deg,
                        transparent 49%,
                        #ffffff2e 50%,
                        transparent 51%
                ),
                #2d2d2d;
        width: 8vmin;
        height: 2vmin;
        top: -2.5vmin;
        left: calc(50% - 3.85vmin);
        border-radius: 0.5vmin;
        z-index: 1;
}

.top {
        border-radius: 5vmin 5vmin 1vmin 1vmin;
}

.bot {
        margin: 0 8%;
        overflow: hidden;
        border-radius: 0 0 1vmin 1vmin;
}

.bot:before {
        content: "";
        height: 70%;
        width: 2px;
        position: absolute;
        background: #00000060;
        left: calc(50% - 1px);
        bottom: 0;
}

.bot:after {
        content: "";
        height: 1.9vmin;
        width: 1.4vmin;
        position: absolute;
        border-left: 2px solid #00000060;
        border-bottom: 2px solid #00000060;
        left: calc(50% - 3.5% - 2px);
        bottom: 70%;
        transform: rotate(-45deg);
}

.tracksuite {
        width: 100%;
        height: 100%;
        z-index: 1;
        position: relative;
}

.tracksuite:before,
.tracksuite:after {
        content: "";
        width: 30%;
        height: calc(100% + 1vmin);
        background: linear-gradient(
                0deg,
                #2b3e85 0%,
                #2b3e85 1%,
                #68b4bc 1%,
                #68b4bc 4%,
                transparent 4%,
                transparent 60%,
                #533540 60%,
                #533540 65%,
                #6abac3 65%,
                #65adb3 75%,
                #a3283a 75%,
                #a3283a 80%,
                #533540 80%,
                #533540 85%,
                #65adb3 80%
        );
        background-color: #2b3e85;
        position: absolute;
        border-right: 0.5vmin dashed #5fa5ad;
        border-radius: 5vmin 0.5vmin 1vmin 1vmin;
        border-bottom: 0.5vmin solid #2b3e85;
}

.tracksuite:after {
        right: 0;
        border-right: 0;
        border-left: 0.5vmin dashed #5fa5ad;
        border-radius: 0.5vmin 5vmin 1vmin 1vmin;
}

.tracksuite span:before,
.top span:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 72.5%;
        border-radius: 5vmin 0 1vmin 1vmin;
        box-shadow: 2px 2px 0px 0 #00000040;
        bottom: 0px;
}

.tracksuite span + span:before,
.top span + span:before {
        border-radius: 0 5vmin 1vmin 1vmin;
        box-shadow: -2px 2px 0px 0 #00000040;
}

.argyle {
        background-color: #6d695c;
        background-image: repeating-linear-gradient(
                        120deg,
                        rgba(255, 255, 255, 0.1),
                        rgba(255, 255, 255, 0.1) 1px,
                        transparent 1px,
                        transparent 1.55vmin
                ),
                repeating-linear-gradient(
                        60deg,
                        rgba(255, 255, 255, 0.1),
                        rgba(255, 255, 255, 0.1) 1px,
                        transparent 1px,
                        transparent 1.55vmin
                ),
                linear-gradient(
                        60deg,
                        rgba(0, 0, 0, 0.1) 25%,
                        transparent 25%,
                        transparent 75%,
                        rgba(0, 0, 0, 0.1) 75%,
                        rgba(0, 0, 0, 0.1)
                ),
                linear-gradient(
                        120deg,
                        rgba(0, 0, 0, 0.1) 25%,
                        transparent 25%,
                        transparent 75%,
                        rgba(0, 0, 0, 0.1) 75%,
                        rgba(0, 0, 0, 0.1)
                );
        background-size: 3.8vmin 6vmin;
        ba.........完整代码请登录后点击上方下载按钮下载查看