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

  • GrafikArşivine | Hoşgeldiniz.

    Ziyaret ettiğiniz için teşekkür ederiz aramıza katılıp bize destek olmak istermisiniz?
    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ış.
    [Resim: grafik_logo.png]
    Cevapla
    Teşekkür verenler:

    Yorum yapma izniniz bulunmuyor!

    Yorum yapa bilmek için giriş yapmalısınız veya üye olmalısınız

    Giriş yap!

    Zaten hesabın var mı? Giriş yap.
    Giriş

    Kayıt ol!

    Bize katılmak için üye olunuz.
    Kayıt

    Hızlı Menü:


    Konuyu Okuyanlar: 2 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