special-background

ui

Tailwind
天气预报

src

page.tsx

tsx
export default function Page() {
    return (
        <div className="flex flex-col gap-5 lg:flex-row">

            <div className="h-80 w-full" style={ {
                backgroundImage: "linear-gradient(#000 1px, transparent 1px), linear-gradient(to right, #000 1px, transparent 1px)",
                backgroundSize: "40px 40px",
                backgroundPosition: "center center",
            } }/>

            <div className="h-80 w-full [--rc:#000] hover:[--rc:#eb3d5b]
                            bg-radial-[var(--rc)_1px,transparent_1px]
                            bg-size-[20px_20px]
                            bg-center"/>
        </div>
    )
}

video