• Ana Sayfa
  • Portal
  • Arama
  • Üye Listesi
  • Diğer

  • Konuyu Oyla:
    • Derecelendirme: 0/5 - 0 oy
    • 1
    • 2
    • 3
    • 4
    • 5
    CSS İle Renk Değiştiren Yazı Yapımı
    #1
    Merhaba arkadaşlar bu yazımızda sizlere renk değiştiren yazı yapmayı anlatıcam ilk önce demo verelim.

    Kod:
    https://codepen.io/dream41/pen/QVrxJp
    CSS: Kodlarımız:

    Kod:
    .renkdegis {
       color: white; <- Yazının ana rengi
       -webkit-animation-name: text;
       animation-name: text; <- animasyon adı istediğinizi yaza bilirsiniz.
       -webkit-animation-duration: 4s; <- Renk değişme hızı
       animation-duration: 4s; <- Renk değişme hızı
    -- Animasyon özellikleri yani renk değiştirmi işlemini yapmak için gerekli kodlar.
       -webkit-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
       -webkit-animation-direction: alternate;
       animation-direction: alternate;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out;
    }

    --Renk ayarları.--

    @-webkit-keyframes text {
       0%   {color:#ff1744;}
       25%  {color:#6a1b9a;}
       50%  {color:#1e88e5;}
       75%  {color:#00c853;}
       100% {color:#ff1744;}
    }

    @keyframes text {
       0%   {color:#ff1744;}
       25%  {color:#6a1b9a;}
       50%  {color:#1e88e5;}
       75%  {color:#00c853;}
       100% {color:#ff1744;}
    }


    HTML kodlarımız:
    Kod:
    <div class="renkdegis">Dream41</div>
    Yada:
    <span class="renkdegis">Dream41</span> Şeklinde yapabilirsiniz sizin tercihinize kalmış.
    Ara
    Cevapla
    Teşekkür verenler:


    Hızlı Menü:


    Konuyu Okuyanlar: 1 Ziyaretçi

    Hakkımızda

    GrafikArşivi 4 Eylül 2018 tarihinde açılmış olup sizlerin destekleri ile büyümeye devam etmekte.

    İletişim

    İletişim sayfamızı kullanabilirsiniz.

    - ya da -
    Türkçe Çeviri: MCTR, Yazılım: MyBB, © 2002-2019 MyBB Group.
    selam