js实现男女装模特上下衣服点击换色搭配效果代码-html代码-BFW代码库

js实现男女装模特上下衣服点击换色搭配效果代码

代码语言：html

所属分类：其他

代码描述：js实现男女装模特上下衣服点击换色搭配效果代码，点击加号选择衣服颜色即可换色，还可以在底部且含男女模特。

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
*{
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    overflow: hidden;
    font-family: Poppins;
}
:root {
    --_size: min(300px, min(64vw, 54vh));
    --_color1: #fff;
    --_color2: #000;

    --_pick_size: 28px;
}

.model {
    width: var(--_size);
    height: min(500px, 90vh);
    position: relative;
    border-radius: 12px;
}
.color-1,
.color-2 {
    background: rgb(206, 206, 206);
    width: var(--_pick_size);
    height: var(--_pick_size);
    border-radius: 8px;
    position: absolute;
    transition: all 0.1s ease-in-out;
    cursor: pointer;

    font-size: 20px;
    font-weight: 300;
    color: #fff;
    text-align: center;
}
.color-1:hover,
.color-2:hover {
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.3);
} 
.color-1::before,
.color-2::before{
    content: "";
    display: block;
    width: calc(var(--_size)/1.8);
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    pointer-events: none;
    top: 50%;
}
.color-1::after,
.color-2::after{
    content: "";
    display: block;
    width: calc(var(--_size)/1.2);
    height: calc(var(--_size)/1.2);

    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: -1;
}
.color-1::after{left: -600%; top: -300%; background: rgba(0, 0, 80, 0.05); scale: 1.2;}
.color-2::after{left: -180%; top: -400%; background: rgba(80, 0, 0, 0.05);}

.color-1 {
    right: -20%;
    top: 8%;
}
.man.card.active ~ .color-1 {
    top: 14%;
}
.color-1::before{
    right: 100%;
    rotate: -15deg;
    transform-origin: 100% 50%;
}
.color-2 {
    left: -20%;
    top: 45%;
}
.color-2::before{
    left: 100%;
    rotate: 15deg;
    transform-origin: 0% 50%;
}
.option {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    cursor: pointer !important;
    top: 0;
    pointer-events: none;
    box-shadow: 
    inset 0 0 0 0px white,
    0 0 0px 1px rgba(0, 0, 0, 0.2);
}
.color-1.active .option, .color-2.active .option { opacity: 1; pointer-events: all; }

.color-1.ac.........完整代码请登录后点击上方下载按钮下载查看