Neler yeni

Html - Css ile Rainbow Text

dexStap

Yazar
Katılım
28 Ocak 2022
Mesajlar
57
Tepkime puanı
130
Puanları
350
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