skip to content
Logo 三七の小站

纯css实现环绕渐变

/ 2 min read

openwrt

来源： Simplest inner glow card animation

点击展开
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auown.com</title>
    <style>
        @property --a {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }
        .card {
            overflow: hidden;
            position: relative;
            width: min(12.5em, 80vmin);
            aspect-ratio: 1;
            border-radius: 0.5em;
            place-self: center;
            place-content: center;
            padding: 0.5em;
            color: #ededed;
            font: clamp(1em, 2vw + 2vh, 2em) sans-serif;
            text-align: center;
            text-transform: uppercase;
            text-wrap: balance;
        }


        .card::before {
            position: absolute;
            z-index: -1;
            inset: -1em;
            border: solid 1.25em;
            border-image: conic-gradient(from var(--a), #669900, #99cc33, #ccee66, #006699, #3399cc, #990066, #cc3399, #ff6600, #ff9900, #ffcc00, #669900) 1;
            filter: blur(0.75em);
            animation: a 4s linear infinite;
            content: "";
        }


        @keyframes a {
            to {
                --a: 1turn;
            }
        }


        html,
        body,
        div {
            display: grid;
        }


        html {
            min-height: 100%;
        }


        body {
            background: url(https://images.unsplash.com/photo-1729824346255-52a8f898fe84?w=1400) 50%/cover #212121;
            background-blend-mode: multiply;
            grid-template-rows: 1fr auto;
            min-height: 100vh;
            margin: 0;
            color: #ededed;
        }


        .footer {
            grid-row: 2;
            text-align: center;
            padding: 1rem;
            background-color: rgba(33, 33, 33, 0.8);
            font-size: 0.8rem;
        }


        .footer a {
            color: #ededed;
            text-decoration: none;
            margin: 0 10px;
        }


        .footer a:hover {
            text-decoration: underline;
        }


        .beian-info {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 10px;
        }


        .beian-info img {
            vertical-align: middle;
            margin-right: 5px;
        }
    </style>
</html>