Code_table

Name of code : div style

Categorie : Overlays CSS

Demo : div style

HTML

CSS

Visual Sstudio Code

<!DOCTYPE html>
<html>
<head>
    <title>Div style</title>
    <style>
        html {
        height: 100%;
        background: #223;
        display: grid;
        place-items: center;
        }

        .box {
        --border-size: 3px;
        --border-angle: 0turn;
        width: 60vmin;
        height: 50vmin;
        background-image: conic-gradient(
            from var(--border-angle),
            #213,
            #112 50%,
            #213
            ),
            conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
        background-size: calc(100% - (var(--border-size) * 2))
            calc(100% - (var(--border-size) * 2)),
            cover;
        background-position: center center;
        background-repeat: no-repeat;

        animation: bg-spin 3s linear infinite;
        }

        .box:hover {
        animation-play-state: paused;
        }

        @keyframes bg-spin {
        to {
            --border-angle: 1turn;
        }
        }

        .box {
        --border-angle: 0turn;
        }

        .box {
        --border-angle: 0turn;
        }

        .box {
        --border-angle: 0turn;
        }

        .box {
        --border-angle: 0turn;
        }

        @property --border-angle {
        syntax: "<angle>";
        inherits: true;
        initial-value: 0turn;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <!-- Inspired by the mega buttons on https://turbo.build/ -->
</body>
</html>