自适应动态登录框效果-html代码-BFW代码库

自适应动态登录框效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
:root {
        font-size: 1.25rem;
        user-select: none;
    }

:root {
        font-family: "Red Hat Text", sans-serif;
        --brand: #e00;
        --bg: #fff;
        --fg: #000811;
        --mid: #999;
        outline: none;
    }

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

        body {
            background-color: var(--bg);
            background-color: #fafafa;
            color: var(--fg);
            overscroll-behavior: none;
            /* display: flex;*/
            flex-direction: column;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            text-align: center;
            display: flex;
        }

@media (prefers-color-scheme: dark) {
:root {
                --bg: #050505;
                --fg: #ddd;
                --mid: #555;
            }

            body {
                background-color: #050505;
            }

            #band {
                fill: transparent;
            }

            form:before {
                opacity: 0.2 !important;
            }
        }
        body::before,
        body::after {
            content: "";
            /*  flex: 1; */
        }

        form {
            position: relative;
            display: block;
            border-radius: 0.4rem;
            box-shadow: 0 0.5rem 0.75rem -0.75rem rgba(0, 0, 0, 0.5);
            width: 20rem;
            margin: 0 auto;
            min-height: 4rem;
        }

        form:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--mid);
            opacity: 0.085;
            z-index: 0;
            border-radius: 0.4rem;
        }

        /* BEGIN GHETTO RESET */
        *,
        *:before,
        *:after {
            box-sizing: border-box;
            padding: 0;
            appearance: none;
            font-size: 1rem;
            font-weight: 300;
            font-family: "Red Hat Text", sans-serif;
            border: 0;
            box-shadow: 0;
            pointer-events: none;
            text-rendering: optimizelegibility;
        }

        input {
            appearance: none;
            pointer-events: all;
            color: currentcolor;
            cursor: pointer;
            box-shadow: none;
            outline: 0 !important;
        }

        small {
            color: var(--mid);
            z-index: 1;
        }

:valid + label,
:focus + label {
            z-index: 4;
            transform-origin: 2.5rem 0;
            animation: rise 0.45s ease-out forwards;
            transform: scale(0.75) translate(0, -1rem);
        }

@keyframes rise {
    .........完整代码请登录后点击上方下载按钮下载查看