HTML'de Nasıl Renk Değiştiren Kod Yapabilirim?

17-12-2023, 13:42:38

Merhabalar,

HTML'de Merhaba adında kelimem var olsun.

Ben bu kelimenin sürekli renk değiştirmesini istiyorum ama mavi olup geri 1 anda hepsi tak diye kırmızı olmayacak maviden kırmızıya yarım yarım renk değişecek şekilde istiyorum.

Çok iyi anlatamadım ama gradient'de kelimenin 2 rengi olur ya onun gibi yarısı mavi olup yarım yarım devam ederek kırmızı olacak gibi istiyorum.

İstediğim renkler sırasıyla
Kırmızı(#ff0000),mavi,turuncu renkleriyle olacak.

İsteğim fazla olduysa kusura bakmayın,yardımlarınız için şimdiden teşekkürler.

17-12-2023, 13:47:36

#2

Mustafa1379

Merhaba, aşağıda ki örneği inceleyebilirsiniz
https://codepen.io/seanfree/pen/PKMPPa

17-12-2023, 13:48:51

#3

soylenmezsmt

Mustafa1379 adlı üyeden alıntı: mesajı görüntüle

Merhaba, aşağıda ki örneği inceleyebilirsiniz
https://codepen.io/seanfree/pen/PKMPPa

Çok teşekkür ederim hocam.

17-12-2023, 14:11:07

#4

quarktheorynuke

soylenmezsmt adlı üyeden alıntı: mesajı görüntüle

Çok teşekkür ederim hocam.

ben de bir şeyler hazırladım chatgpt ile :d

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    #animatedWord {
      font-size: 2em;
      font-weight: bold;
      display: flex;
    }

    .char {
      animation: colorChange 1s infinite; /* Animasyon süresi 1 saniye */
    }

    @keyframes colorChange {
      0%, 100% {
        color: red;
      }
      12.5% {
        color: #ff7f00;
      }
      25% {
        color: yellow;
      }
      37.5% {
        color: #7fff00;
      }
      50% {
        color: green;
      }
      62.5% {
        color: #00ff7f;
      }
      75% {
        color: cyan;
      }
      87.5% {
        color: blue;
      }
    }
  </style>
  <title>Word Animation</title>
</head>
<body>
  <div id="animatedWord">Merhaba Benim Adım SynthJob!</div>
  <script>
    const textElement = document.getElementById('animatedWord');
    const text = textElement.innerText;
    textElement.innerHTML = '';

    for (let i = 0; i < text.length; i++) {
      const charElement = document.createElement('span');
      charElement.classList.add('char');
      charElement.style.animationDelay = `${i * 0.1}s`; /* Her karakterin animasyon başlatma gecikmesini hızlandırmak için */
      
      // Boşluk karakterlerini dikkate al
      if (text[i] === ' ') {
        charElement.innerHTML = '&nbsp;'; // Boşluğu koru
      } else {
        charElement.innerText = text[i];
      }
      
      textElement.appendChild(charElement);
    }
  </script>
</body>
</html>

17-12-2023, 14:22:42

#5

soylenmezsmt

quarktheorynuke adlı üyeden alıntı: mesajı görüntüle

ben de bir şeyler hazırladım chatgpt ile :d

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    #animatedWord {
      font-size: 2em;
      font-weight: bold;
      display: flex;
    }

    .char {
      animation: colorChange 1s infinite; /* Animasyon süresi 1 saniye */
    }

    @keyframes colorChange {
      0%, 100% {
        color: red;
      }
      12.5% {
        color: #ff7f00;
      }
      25% {
        color: yellow;
      }
      37.5% {
        color: #7fff00;
      }
      50% {
        color: green;
      }
      62.5% {
        color: #00ff7f;
      }
      75% {
        color: cyan;
      }
      87.5% {
        color: blue;
      }
    }
  </style>
  <title>Word Animation</title>
</head>
<body>
  <div id="animatedWord">Merhaba Benim Adım SynthJob!</div>
  <script>
    const textElement = document.getElementById('animatedWord');
    const text = textElement.innerText;
    textElement.innerHTML = '';

    for (let i = 0; i < text.length; i++) {
      const charElement = document.createElement('span');
      charElement.classList.add('char');
      charElement.style.animationDelay = `${i * 0.1}s`; /* Her karakterin animasyon başlatma gecikmesini hızlandırmak için */
      
      // Boşluk karakterlerini dikkate al
      if (text[i] === ' ') {
        charElement.innerHTML = '&nbsp;'; // Boşluğu koru
      } else {
        charElement.innerText = text[i];
      }
      
      textElement.appendChild(charElement);
    }
  </script>
</body>
</html>

ChatGPT işe yaramış gibi hocam.Fevkalede

Buradan bakabilirsiniz
https://roketbayim.com/fevkalde.php

17-12-2023, 14:25:07

#6

quarktheorynuke

soylenmezsmt adlı üyeden alıntı: mesajı görüntüle

ChatGPT işe yaramış gibi hocam.Fevkalede

Buradan bakabilirsiniz
https://roketbayim.com/fevkalde.php

yapmayın hocam şımartıyorsunuz beni :d

17-12-2023, 14:28:12

#7

soylenmezsmt

quarktheorynuke adlı üyeden alıntı: mesajı görüntüle

yapmayın hocam şımartıyorsunuz beni :d