Neler yeni

Html - Css ile Rainbow Text

dexStap

ALTIN
Katılım
28 Ocak 2022
Mesajlar
35
Tepkime puanı
76
Puanları
200
Html ve Css ile rainbow text yapımı

oyuncunun-ini.gif

HTML:
<html>
    <head>
        <meta charset="utf-8">
        <title>Oyuncunun-ini</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="Oyuncunun-ini"name="title">
        <meta content="Oyuncunun-ini" name="keywords">
        <meta content="Oyuncunun-ini" name="description">
        <!-- Favicon -->
        <link href="img/favicon.ico" rel="icon">
    </head>
    <body>
        <div class ="box">
            <h3>Oyuncunun-ini</h3>
        </div>
    </body>


    <style>
        body {background: #000;}

        .box {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "Segoe UI";
        }

        @keyframes color {
            from{
                background-position: 0% 50%;
            }
            
            to {
                background-position: 100% 50%;
            }
        }

        h3 {
            font-size: 8vw;
            font-weight: 600;
            color: transparent;
            background: rgb(255, 0, 0);
            background: linear-gradient(
                90deg,
                rgba(255, 0, 0, 1)0%,
                rgba(238, 100, 10, 1)7%,
                rgba(210, 169, 39, 1)14%,
                rgba(234, 252, 62, 1)21%,
                rgba(134, 248, 82, 1)28%,
                rgba(99, 245, 156, 1)35%,
                rgba(87, 241, 215, 1)42%,
                rgba(75, 216, 237, 1)49%,
                rgba(66, 158, 239, 1)56%,
                rgba(57, 74, 241, 1)63%,
                rgba(126, 45, 244, 1)70%,
                rgba(162, 84, 247, 1)77%,
                rgba(229, 117, 249, 1)84%,
                rgba(251, 103, 164, 1)91%,
                rgba(253, 127, 190, 1)98%,
                rgba(255, 0, 191, 1)100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            background-size: 500%;
            animation: color 3s linear infinite;
        }


    </style>
</html>

İyi Forumlar, İyi Çalışmalar Dilerim :coffee:
 
Üst Alt
Reklam Engelleyici Algılandı

Anlıyoruz, reklamlar can sıkıcı!

Reklam engelleme yazılımı reklamları engellemede harika bir iş çıkarır, ancak aynı zamanda web sitemizin faydalı özelliklerini de engeller. En iyi site deneyimi için lütfen AdBlocker'ınızı devre dışı bırakın.

AdBlock'u Devre Dışı Bıraktım    Hayır, Teşekkürler