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;
        }

        /* Lightsaber styling */

        .lightsaber {
            margin-top: 25vh;
            grid-column: 1 / -1;
            position: relative;
        }

        #on-off {
            position: absolute;
            width: 0;
            height: 0;
        }

        .hilt {
            cursor: pointer;
            display: block;
            width: 0.75rem;
            height: 7rem;
            background-color: red;
            border-radius: 0 0 4px 4px;
            background-image: linear-gradient(
            silver 0 10px,
            hsl(39 75% 50%) 0 14px,
            silver 0 15px,
            black 0 20px,
            silver 0 22px,
            black 0 25px,
            silver 0 27px,
            black 0 30px,
            silver 0 32px,
            black 0 35px,
            silver 0 37px,
            black 0 40px,
            silver 0 42px,
            black 0 45px,
            silver 0 47px,
            black 0 50px,
            silver 0 60px,
            hsl(39 75% 50%) 60px 80px,
            silver 0 100%
            );
        }

        .blade {
            position: absolute;
            background: white;
            height: 350%;
            width: 100%;
            bottom: 100%;
            border-radius: 100vw 100vw 0 0;
            box-shadow: inset 0 0 4px
            hsl(var(--blade-hue) 100% var(--blade-lightness) / 1),
            0 0 1em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.8),
            0 0 1.5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.7),
            0 0 2em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.5),
            0 0 3em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.3),
            0 0 5em hsl(var(--blade-hue) 100% var(--blade-lightness) / 0.2);

            transition: transform 50ms ease-out;
            transform-origin: bottom;
        }

        .blade::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: hsl(var(--blade-hue)100% var(--blade-lightness));
            border-radius: inherit;
            filter: blur(0.5em);
            opacity: 1;
            -webkit-animation: pulse linear 5s infinite;
        .........完整代码请登录后点击上方下载按钮下载查看