js实现男女装模特上下衣服点击换色搭配效果代码
代码语言:html
所属分类:其他
代码描述:js实现男女装模特上下衣服点击换色搭配效果代码,点击加号选择衣服颜色即可换色,还可以在底部且含男女模特。
代码标签: 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.active .option:nth-child(1), .color-2.active .option:nth-child(1) { top: 120%;} .color-1.active .option:nth-child(2), .color-2.active .option:nth-child(2) { top: 240%;} .color-1.active .option:nth-child(3), .color-2.active .option:nth-child(3) { top: 360%;} .color-1.active .option:nth-child(4), .color-2.active .option:nth-child(4) { top: 480%;} .color-1.active .option:nth-child(4), .color-2.active .option:nth-child(4) { top: 480%;} .option:hover { box-shadow: inset 0 0 0 3px white, 0 0 0px 1px rgba(0, 0, 0, 0.08); } .option.picker input { opacity: 0; cursor: pointer; } .gender { position: absolute; bottom: -8%; left: 0; right: 0; width: 80%; margin: auto; display: flex; justify-content: space-around; font-size: 16px; } @media screen and (max-height: 620px) { .gender { bottom: 0%; background-color: rgba(255,255,255,1); width: 100%; padding: 4px 0; opacity: 0.4; } } .gender > div { cursor: pointer; opacity: 0.3; transition: all 0.1s ease-in-out; text-transform: uppercase; } .gender > div.active, .gender > div:hover { opacity: 1; font-weight: bold; } .man.card , .woman.card { height: 100%; width: 100%; position: absolute; opacity: 0; transform: rotateY(90deg); transition: all 0.2s ease-in-out; } .man img, .woman img{ border-radius: 12px; width: 100%; height: 100%; object-fit: cover; position: absolute; object-position: 50% 50%; image-rendering: optimizeQuality; left: 0; top: 0; } .man.card.active, .woman.card.active { transform: rotateY(0deg); display: block; opacity: 1; } .man *, .woman * { width: 100%; height: 100%; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; position: absolute; } .mask { position: absolute; } .man .mask#shirt-target { -webkit-mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/man_coat_pdoqp0.png'); mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/man_coat_pdoqp0.png'); } .man .mask#pants-target { -webkit-mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/man_pants_oe5q6h.png'); mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/man_pants_oe5q6h.png'); } .woman .mask#blouse-target { -webkit-mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/woman_blouse_xfsap3.png'); mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/woman_blouse_xfsap3.png'); } .woman .mask#skirt-target { -webkit-mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/woman_skirt_ong9rk.png'); mask-image: url('//repo.bfw.wiki/bfwrepo/images/cloth/woman_skirt_ong9rk.png'); } .shadows_shirt, .shadows_pants { position: relative; display: none; } .color-block { width: 100%; height: 100%; top: 0; } </style> </head> <body translate="no"> <div class="model"> <div class="man card active"> <img src="//repo.bfw.wiki/bfwrepo/images/cloth/man_vqnnyq.png" alt="" class="base" id="man"> <div class="mask" id="shirt-target"> <div class="color-block" id="shirt-color-block"></div> </div> <div class="mask" id="pants-target"> <div class="color-block" id="pants-color-block"></div> </div> </div> <div class="woman card"> <img src="//repo.bfw.wiki/bfwrepo/images/cloth/woman_jgkhmi.png" alt="" class="base" id="woman"> <div class="mask" id="blouse-target"> <div class="color-block" id="blouse-color-block"></div> </div> <div class="mask" id="skirt-target"> <div class="color-block" id="skirt-color-block"></div> </div> </div> <div class="color-1" onclick="this.classList.toggle('active')"> + <div class="option preset" data-color="rgb(255,255,255)"></div> <div class="option preset" data-color="rgb(192 193 224)"></div> <div class="option preset" data-color="rgb(163 163 163)"></div> <div class="option picker"><input type="color" id="input-color-shirt" value="#c9c9c9.........完整代码请登录后点击上方下载按钮下载查看
网友评论0