react实现一个颜色选择器效果代码-html代码-BFW代码库

react实现一个颜色选择器效果代码

代码语言：html

所属分类：选择器

代码描述：react实现一个颜色选择器效果代码

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

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

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap'>

    <style>
        body, html {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Open Sans", sans-serif;
            background-color: #fafcff;
            background-image: radial-gradient(circle, transparent, #afb5bf), linear-gradient(transparent, #d3d8e0);
        }

        .color-picker {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
        .color-picker .shade-selector,
        .color-picker .hue-selector {
            position: relative;
            width: 250px;
            margin: 15px;
            cursor: pointer;
            user-select: none;
            border-radius: 3px;
            box-shadow: inset 0 0 1px rgba(2, 31, 39, 0.4), inset 0 0 5px rgba(58, 77, 82, 0.2);
        }
        .color-picker .shade-selector {
            height: 250px;
            background: linear-gradient(transparent, black), linear-gradient(90deg, white, transparent), linear-gradient(var(--color), var(--color));
        }
        .color-picker .hue-selector {
            height: 8px;
            background-image: linear-gradient(90deg, red, #ff0, lime, cyan, blue, #f0f, red);.........完整代码请登录后点击上方下载按钮下载查看