vue实现多种形式的色卡选择效果代码-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：vue实现多种形式的色卡选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">



    <style>
@charset "UTF-8";

:root {
        --c-black: #212121;
        --c-white: #fff;
        --c-background: var(--c-black);
        --c-background-contrast: var(--c-white);
        --s-toggler-button-height: 4rem;
        --s-bezel: 2rem;
        --font: "Inter", sans-serif;
        font-size: calc(.6rem + .4vw);
    }

@supports (font-variation-settings: normal) {
:root {
            --font: "Inter var", sans-serif;
        }
    }
:root {
        font-family: var(--font);
        font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum", "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
    }

        .palette {
            transition: background-color 300ms 440ms ease-out;
        }

        a {
            color: currentColor;
            font-weight: 700;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        a[href*="//"]:not([href*="color.pizza"])::after {
            display: inline-block;
            content: "↓";
            font-size: 0.8em;
            font-weight: 300;
            transform: translate(10%, -25%) rotate(-135deg);
            transition: 300ms transform cubic-bezier(0.8, 0.3, 0.25, 1.75);
        }
        a[href*="//"]:not([href*="color.pizza"]):hover::after {
            transform: translate(20%, -35%) rotate(-135deg) scale(0.7);
        }

        .palette--header {
            z-index: 1;
            position: fixed;
            color: var(--c-background-contrast);
            padding: 3.5rem 4rem;
            width: 40%;
        }
        .palette--header h1 {
            font-size: 6rem;
            font-weight: 700;
            text-shadow: 0 0 0 transparent;
            transition: 600ms text-shadow;
        }
        .palette--header h1:hover {
            text-shadow: var(--text-shadow);
        }
        .palette--header h2 {
            font-size: 2.5rem;
            font-weight: 100;
            margin-top: 0.75rem;
        }

        .button-row {
            display: flex;
            width: 100%;
        }
        .button-row > input[type=color] {
            width: calc(100% - .25em);
            margin-left: 0.7em;
            border-radius: 1em;
            overflow: hidden;
            cursor: pointer;
        }

        .button {
            display: inline-block;
            border: none;
            background: transparent;
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--c-background);
            padding: 0;
            text-decoration: underline;
            cursor: pointer;
            margin-bottom: 0.25em;
        }
        .button + .button {
            margin-left: 0.75em;
        }
        .button--color {
            position: relative;
        }
        .button--color i {
            display: inline-block;
            width: 0.75em;
            height: 0.75em;
            border-radius: 50%;
            box-shadow: 0 0 0 2px var(--c-black);
        }
        .button--color strong {
            display: none;
            position: absolute;
            left: 1em;
        }

        .settings-wrap {
            z-index: 2;
            position: fixed;
            height: var(--s-toggler-button-height);
            min-width: 10.75rem;
            right: var(--s-bezel);
            top: calc(2.3 * var(--s-bezel));
            transition: min-width 337ms cubic-bezier(0.13, 1, 0.4, 1) 800ms, height 337ms cubic-bezier(0.13, 1, 0.4, 1) 500ms, color 200ms linear 300ms, background-color 200ms linear 300ms;
        }
        .palette---visible-settings .settings-wrap {
            min-width: 24rem;
            height: calc(100% - calc(3 * var(--s-bezel)));
            box-shadow: 0 0 0 0 var(--c-white);
            color: var(--c-black);
            transition: min-width 337ms cubic-bezier(0.13, 1, 0.4, 1), height 337ms cubic-bezier(0.13, 1, 0.4, 1) 220ms, color 200ms linear 300ms, background-color 200ms linear 300ms;
        }

        .settings-toggler {
            z-index: 2;
            position: absolute;
            right: 0;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            height: 0;
            padding: var(--s-toggler-button-height)0 0;
            font-weight: 200;
            border: none;
            background: none;
            font-size: 1.5rem;
            border-radius: 0;
            color: var(--c-background-contrast);
            cursor: pointer;
            outline: none;
        }
        .palette---visible-settings .settings-toggler:hover {
            box-shadow: none;
        }
        .settings-toggler__label {
            z-index: 1;
            text-align: left;
            position: absolute;
            display: block;
            right: 2.7rem;
            top: 50%;
            transform: translate(0, -50%);
            margin-top: -0.12ex;
            padding-left: var(--s-bezel);
            width: 8rem;
            transition: 400ms width 300ms;
        }
        .palette---visible-settings .settings-toggler__label {
            width: 19.3rem;
        }
        .settings-toggler__label .dotsnav {
            position: absolute;
            top: 0;
            right: -1.5rem;
            fill: var(--c-background-contrast);
            width: 2rem;
            height: 2rem;
        }
        .settings-toggler__label .dots {
            transition: 222ms transform 100ms;
        }
        .palette---visible-settings .settings-toggler__label .dots {
            fill: var(--c-black);
            transition: 222ms transform 0ms;
        }
        .palette---visible-settings .settings-toggler__label .dots--bottom {
            transform: translate(12px, 12px) rotate(45deg) translate(-12px, -12px);
        }
        .palette---visible-settings .settings-toggler__label .dots--top {
            transform: translate(12px, 12px) rotate(-45deg) translate(-12px, -12px);
        }
        .settings-toggler::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: hotpink;
            transform-origin: 100% 50%;
            transform: scaleX(0);
            background-color: var(--c-white);
        }
        .palette---visible-settings .settings-toggler::after {
            transform: scaleX(1);
            transition: transform 337ms cubic-bezier(0.13, 1, 0.4, 1) 200ms;
        }
        .palette---visible-settings .settings-toggler {
            color: currentColor;
        }

        .settings {
            opacity: 0;
            pointer-events: none;
            position: absolute;
            right: 0;
            top: var(--s-toggler-button-height,0);
            bottom: 0;
            left: 0;
            font-size: 1.2rem;
            box-sizing: border-box;
            padding: 0 var(--s-bezel);
            color: currentColor;
            transition: opacity 200ms linear 500ms;
            overflow: hidden;
        }
        .palette---visible-settings .settings {
            opacity: 1;
            pointer-events: auto;
            overflow-y: auto;
        }
        .settings > * {
            transform: translateY(-50%) translateX(50%) scale(0.5);
            opacity: 0;
            transition: opacity 350ms cubic-bezier(0.88, 0, 0, 1), transform 450ms cubic-bezier(0.88, 0, 0, 1);
            background-color: var(--c-white);
            margin: 0 calc(var(--s-bezel) * -1);
            padding: 0 var(--s-bezel);
            /*backdrop-filter: blur(5px);
  background-color: rgba(255,255,255,.7);
  */
        }
        .settings > *:last-child {
            padding-bottom: var(--s-bezel);
        }
        .palette---visible-settings .settings > * {
            transform: scale(1);
            opacity: 1;
        }
        .palette---visible-settings .settings > *:nth-child(1) {
            transition-delay: 200ms, 175ms;
        }
        .palette---visible-settings .settings > *:nth-child(2) {
            transition-delay: 250ms, 250ms;
        }
        .palette---visible-settings .settings > *:nth-child(3) {
            transition-delay: 300ms, 325ms;
        }
        .palette---visible-settings .settings > *:nth-child(4) {
            transition-delay: 350ms, 400ms;
        }
        .palette---visible-settings .settings > *:nth-child(5) {
            transition-delay: 400ms, 475ms;
        }
        .palette---visible-settings .settings > *:nth-child(6) {
            transition-delay: 450ms, 550ms;
        }
        .palette---visible-settings .settings > *:nth-child(7) {
            transition-delay: 500ms, 625ms;
        }
        .palette---visible-settings .settings > *:nth-child(8) {
            transition-delay: 550ms, 700ms;
        }
        .palette---visible-settings .settings > *:nth-child(9) {
            transition-delay: 600ms, 775ms;
        }
        .palette---visible-settings .settings > *:nth-child(10) {
            transition-delay: 650ms, 850ms;
        }
        .palette---visible-settings .settings > *:nth-child(11) {
            transition-delay: 700ms, 925ms;
        }
        .palette---visible-settings .settings > *:nth-child(12) {
            transition-delay: 750ms, 1000ms;
        }
        .palette---visible-settings .settings > *:nth-child(13) {
            transition-delay: 800ms, 1075ms;
        }
        .palette---visible-settings .settings > *:nth-child(14) {
            transition-delay: 850ms, 1150ms;
        }
        .palette---visible-settings .settings > *:nth-child(15) {
            transition-delay: 900ms, 1225ms;
        }

        .setting {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-bottom: 1.2em;
        }
        .setting button {
            border: none;
            background: transparent;
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--c-black);
            padding: 0;
            text-decoration: underline;
        }
        .setting__label {
            text-transform: capitalize;
            flex-grow: 1;
            flex-basis: 1 1 80%;
            font-weight: 700;
            font-size: 0.8em;
            margin-bottom: 0.5em;
            margin-top: 0.75em;
        }
        .setting__input {
            width: 70%;
        }
        .setting__value {
            font-size: 0.6em;
            text-align: right;
            flex: 1 1 20%;
        }

        .setting__colors {
            width: 100%;
        }
        .setting__colors > button {
            margin-top: 0.5rem;
        }

        .setting__color {
            color: currentColor;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            font-size: 0.75rem;
            margin-bottom: 0.5rem;
        }
        .setting__color input, .setting__color button {
            color: currentColor;
            border: none;
            box-sizing: border-box;
            padding: 0;
        }
        .setting__color input {
            flex: 0 0 calc(100% - 1.25rem);
        }
        .setting__color button {
            flex: 0 0 1.25rem;
            background: none;
            cursor: pointer;
            font-size: 1rem;
            color: currentColor;
        }

        input {
            background-color: transparent;
        }

        input[type=range],
        input[type=color] {
            -webkit-appearance: none;
            width: 100%;
        }

        input[type=color]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        input[type=color]::-webkit-color-swatch {
            border: none;
        }

        input[type=color] {
            border: 2px solid var(--c-black);
            padding: 0;
            height: 1.1rem;
        }

        input[type=range] {
            margin: 0;
        }

        input[type=range]:focus {
            outline: none;
        }
        input[type=range]:focus::-webkit-slider-thumb {
            -webkit-clip-path: polygon(100% 0%, 0% 0%, 50% 100%, 50% 100%);
            clip-path: polygon(100% 0%, 0% 0%, 50% 100%, 50% 100%);
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 1rem;
            cursor: pointer;
            animate: 0.2s;
            background: transparent;
            color: var(--c-black);
            border-radius: 0;
            border: solid var(--c-black);
            border-width: 0 0 1px;
        }

        input[type=range]::-webkit-slider-thumb {
            border: 2px solid transparent;
            height: 0.75rem;
            width: 0.5rem;
            border-radius: 0;
            background: var(--c-black);
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: 0.25rem;
            transition: 150ms background-color, 200ms clip-path, 200ms -webkit-clip-path;
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }

        input[type=range]::-moz-range-track {
            width: 100%;
            height: 1rem;
            cursor: pointer;
            animate: 0.2s;
            background: transparent;
            color: var(--c-black);
            border-radius: 0;
            border: solid var(--c-black);
            border-width: 0 0 1px;
        }

        input[type=range]::-moz-range-thumb {
            border: 2px solid transparent;
            height: 0.75rem;
            width: 0.5rem;
            border-radius: 0;
            background: var(--c-black);
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: 0.25rem;
            transition: 150ms background-color, 200ms clip-path, 200ms -webkit-clip-path;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }

        input[type=range]::-ms-track {
            width: 100%;
            height: 1rem;
            cursor: pointer;
            animate: 0.2s;
            background: transparent;
            color: var(--c-black);
            border-radius: 0;
            border: solid var(--c-black);
            border-width: 0 0 1px;
        }

        input[type=range]::-ms-fill-lower {
            background: currentColor;
            border: none;
            border-radius: 100%;
        }

        input[type=range]::-ms-fill-upper {
            background: currentColor;
            border-radius: 100%;
            box-shadow: none;
        }

        input[type=range]::-ms-thumb {
            border: 2px solid transparent;
            height: 0.75rem;
            width: 0.5rem;
            border-radius: 0;
            background: var(--c-black);
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: 0.25rem;
            transition: 150ms background-color, 200ms clip-path, 200ms -webkit-clip-path;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }

        select,
        .multiselect {
            color: var(--c-black);
            font-family: var(--font);
            width: 100%;
            box-sizing: border-box;
            font-size: 1rem;
            -webkit-appearance: none;
            border: 0;
            box-shadow: 0 1px 0 0 currentColor;
            border-radius: 0;
            padding: 0.25rem 1rem 0.25rem 0rem;
            background-color: transparent;
            transition: 150ms background-color;
        }
        select:focus,
        .multiselect:focus {
            outline: none;
            background-color: transparent;
        }

        .multiselect {
            padding: 0.25rem 0;
        }

        .multiselect__content-wrapper {
            background: var(--white);
            overflow: auto;
        }

        .multiselect__content {
            overflow: hidden;
            width: 100%;
            padding: 0.5rem 0;
        }

        .multiselect__option {
            position: relative;
            display: block;
            padding: 0.25rem 0;
            cursor: pointer;
            overflow: hidden;
        }

        .multiselect__single {
            display: block;
        }

        .option__title,
        .option__preview {
            display: block;
        }

        .option__title {
            position: relative;
            z-index: 1;
            font-size: 0.9em;
            padding: 0.25rem 0;
            text-shadow: 1px 1px #fff, -1px -1px #fff, -1px 1px #fff, 1px -1px #fff;
        }

        .option__preview {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            transform-origin: 100% 50%;
            transform: scaleY(0.2) scaleX(0.4);
            transition: 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 400ms;
        }

        .multiselect__option:hover .option__preview {
            transform: scaleY(1) scaleX(0.4);
        }

        .select-wrap {
            width: 100%;
            position: relative;
        }
        .select-wrap::after {
            pointer-events: none;
            position: absolute;
            top: 0;
            right: 0;
            content: "↓";
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .blade {
            position: absolute;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 40vh;
            width: 10vh;
            top: -40vh;
            left: 0;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 15px rgba(0, 0, 0, 0.1);
            transform: translate3d(0, 0, 0) rotate(0deg);
            transform-origin: 1vh 39vh;
            border-radius: 0.5vh;
            overflow: hidden;
            transition: 200ms 200ms transform ease-in-out;
            transition: 200ms 200ms transform cubic-bezier(0.25, 0.25, 0.275, 1.265);
        }
        .blade__label, .blade__value {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1vh;
            line-height: 1.2;
        }
        .blade__label {
            color: var(--c-white);
            font-size: 0.8rem;
            padding-top: 0.75vh;
            font-weight: 300;
            line-height: 1.5;
        }
        .blade__label--inner {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .blade__value {
            font-size: calc(0.6rem + .3vmin);
            line-height: 1.5;
            font-weight: 500;
            line-height: 0.75;
            text-transform: uppercase;
            background: var(--c-white);
            color: currentColor;
        }

        .view {
            position: relative;
            height: 100vh;
            overflow: auto;
            margin: var(--s-bezel);
        }

        .view--wheel {
            z-index: 1;
            margin-top: 0;
            overflow: hidden;
        }

        .fan {
            position: absolute;
            top: 50%;
            left: 50%;
            perspective: 600px;
            transition: 666ms transform cubic-bezier(0.88, 0, 0, 1);
            transition: 666ms transform cubic-bezier(0.4, 0, 0.25, 1);
        }

        .view--cube {
            position: relative;
            overflow: hidden;
        }
        .view--cube .select-wrap {
            z-index: 1;
            position: absolute;
            bottom: 1rem;
            left: 1rem;
            width: auto;
            min-width: 4rem;
            background-position: 90% 50%;
            color: var(--c-background-contrast);
        }
        .view--cube .select-wrap select {
            text-transform: uppercase;
        }
        .view--cube .select-wrap:focus {
            color: var(--c-background);
        }

        .view--radialgradient {
            overflow: hidden;
        }

        .radialgradient {
            position: absolute;
       .........完整代码请登录后点击上方下载按钮下载查看