CSS Lastnost: repeating-conic-gradient()

Funkcija repeating-conic-gradient() ustvari ponavljajoči se stožčasti gradient, kjer se vzorec periodično ponavlja okoli središčne točke. Ta funkcija je posebej uporabna za ustvarjanje kompleksnih geometrijskih vzorcev, kot so šahovnice, koncentrični krogi in drugi periodični vzorci.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Primeri repeating-conic-gradient()</title>
    <style>
        .pattern-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .pattern-box {
            height: 200px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            transition: transform 0.3s ease;
        }

        .pattern-box:hover {
            transform: scale(1.05);
        }

        /* Šahovnica */
        .pattern-1 {
            background: repeating-conic-gradient(
                from 0deg,
                #000 0deg 45deg,
                #fff 45deg 90deg
            );
        }

        /* Hipnotični vzorec */
        .pattern-2 {
            background: repeating-conic-gradient(
                from 0deg,
                #ff6b6b 0deg 10deg,
                #4ecdc4 10deg 20deg
            );
            border-radius: 50%;
        }

        /* Barvno kolo */
        .pattern-3 {
            background: repeating-conic-gradient(
                from 0deg,
                #ff6b6b 0deg 60deg,
                #ffe66d 60deg 120deg,
                #4ecdc4 120deg 180deg,
                #45b7d1 180deg 240deg,
                #96ceb4 240deg 300deg,
                #ff6b6b 300deg 360deg
            );
            border-radius: 50%;
        }

        /* Radialni vzorec */
        .pattern-4 {
            background: repeating-conic-gradient(
                from 0deg,
                transparent 0deg 15deg,
                #2c3e50 15deg 30deg
            );
        }

        /* Vetrovnica */
        .pattern-5 {
            background: repeating-conic-gradient(
                from 45deg,
                #ff6b6b 0deg 45deg,
                transparent 45deg 90deg
            );
        }

        /* Kompleksni vzorec */
        .pattern-6 {
            background: repeating-conic-gradient(
                from 0deg,
                rgba(255, 107, 107, 0.8) 0deg 30deg,
                rgba(78, 205, 196, 0.8) 30deg 60deg,
                rgba(255, 230, 109, 0.8) 60deg 90deg
            );
        }

        /* Animirani gumb */
        .rotating-button {
            padding: 20px 40px;
            border: none;
            border-radius: 50px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            background: repeating-conic-gradient(
                from 0deg,
                #ff6b6b 0deg 30deg,
                #4ecdc4 30deg 60deg
            );
            animation: rotate 4s linear infinite;
        }

        @keyframes rotate {
            from {
                background: repeating-conic-gradient(
                    from 0deg,
                    #ff6b6b 0deg 30deg,
                    #4ecdc4 30deg 60deg
                );
            }
            to {
                background: repeating-conic-gradient(
                    from 360deg,
                    #ff6b6b 0deg 30deg,
                    #4ecdc4 30deg 60deg
                );
            }
        }

        .rotating-button span {
            display: inline-block;
            color: white;
            font-weight: bold;
            mix-blend-mode: difference;
        }
    </style>
</head>
<body>
    <h2>Osnovni primeri repeating-conic-gradient()</h2>
    <div class="pattern-container">
        <div class="pattern-box pattern-1">
            Šahovnica
        </div>
        
        <div class="pattern-box pattern-2">
            Hipnotični vzorec
        </div>
        
        <div class="pattern-box pattern-3">
            Barvno kolo
        </div>
        
        <div class="pattern-box pattern-4">
            Radialni vzorec
        </div>
        
        <div class="pattern-box pattern-5">
            Vetrovnica
        </div>
        
        <div class="pattern-box pattern-6">
            Kompleksni vzorec
        </div>
    </div>

    <h3>Animirani primer</h3>
    <button class="rotating-button">
        <span>Vrteči se gumb</span>
    </button>

    <h3>Razlaga primerov:</h3>
    <ul>
        <li><strong>Šahovnica:</strong> Klasični črno-beli vzorec s ponavljanjem na 90 stopinj</li>
        <li><strong>Hipnotični vzorec:</strong> Intenzivno ponavljajoči se vzorec z manjšimi koti</li>
        <li><strong>Barvno kolo:</strong> Kompleksnejši vzorec z več barvnimi prehodi</li>
        <li><strong>Radialni vzorec:</strong> Vzorec s prosojnimi elementi za posebne učinke</li>
        <li><strong>Vetrovnica:</strong> Diagonalni vzorec s prosojnostjo</li>
        <li><strong>Kompleksni vzorec:</strong> Kombinacija barv s prosojnostjo za subtilen učinek</li>
        <li><strong>Animirani gumb:</strong> Primer uporabe s CSS animacijo za rotacijo vzorca</li>
    </ul>
</body>
</html>
REZULTAT