css实现光剑打开关闭更换颜色效果代码-html代码-BFW代码库

css实现光剑打开关闭更换颜色效果代码

代码语言：html

代码描述：css实现光剑打开关闭更换颜色效果代码

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

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

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">



    <style>
:root {
        --blade-hue: 120;
        --blade-lightness: 50%;
    }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            background: #222;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: 100px 50px 1fr;
            min-height: 100vh;
            place-items: center;
            font-family: "Source Sans Pro", sans-serif;
            text-transform: uppercase;
            font-size: 1.5rem;
        }

        /* The color pickers */

        [name="color"] {
            grid-row: 1 / 2;
            align-self: end;
            margin: 0.5em;
        }

        label:not(.hilt) {
            color: white;
            font-weight: bold;
            align-self: start;
        }

        /.........完整代码请登录后点击上方下载按钮下载查看