css+js实现汽车自定义车漆颜色拖拽换色对比效果代码-html代码-BFW代码库

css+js实现汽车自定义车漆颜色拖拽换色对比效果代码

代码语言：html

所属分类：拖放

代码描述：css+js实现汽车自定义车漆颜色拖拽换色对比效果代码

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

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

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

  
  
  
<style>
:where(fieldset[data-uic~="color-compare"]) {
        border: var(--cc-bdw, 1px) solid var(--cc-bdc, #CCC);
        border-radius: var(--cc-bdrs, .25em);
        container-type: inline-size;
        display: grid;
        margin: 0;
        padding: 0;

        & img,
        & input {
                grid-column: 1 / -1;
                grid-row: 1 / -1;
                position: relative;
        }

        & img { width: 100%; }

        & input[type=color] {
                align-self: var(--cc-color-as, start);
                background: transparent;
                border: 0;
                border-radius: var(--cc-color-bdrs, 50%);
                height: var(--cc-color-w, min(10cqi, 5em));
                margin: 1cqi;
                padding: 0;
                width: var(--cc-color-w, min(10cqi, 5em));

                &::-webkit-color-swatch,
                &::-webkit-color-swatch-wrapper {
                        border: 0;
                        border-radius: inherit;
                        padding: 0;
                }
        }

        & input[type=range] {
                appearance: none;
                background: transparent;
                margin: 0;
                touch-action: none;

                &::before {
                        background-image: linear-gradient(to right, var(--_c1) 0 var(--_x), var(--_c2) 0 var(--_x));
                        content: "";
                        inset: 0;
                        -webkit-mask: var(--cc-mask) no-repeat center / cover;
                        mask: var(--cc-mask) no-repeat center / cover;
                        mix-blend-mode: multiply;
                        position: absolute;
                }

                &::-webkit-slider-runnable-track {
                        height: 100%;
                }
                
                &::-webkit-slider-thumb {
        .........完整代码请登录后点击上方下载按钮下载查看