CSS ile SVG Yazı Animasyonu

css-svg-yazi-animasyon

SVG yazı animasyonları, web sayfalarınıza göz alıcı ve ilgi çekici bir unsur katmanın harika bir yoludur. Bu animasyonlar, basit metinleri dinamik ve etkileşimli hale getirerek kullanıcı deneyimini geliştirmeye yardımcı olur.

Avantajlar:

  • Hafif ve Ölçeklenebilir: SVG’ler vektörel grafikler olduğu için, animasyonlar her cihazda keskin ve net görünür.
  • Esneklik: CSS animasyonları ile metnin rengini, boyutunu, konumunu ve diğer özelliklerini kolayca değiştirebilirsiniz.
  • Kolay Uygulama: Birkaç satır CSS kodu ile karmaşık animasyonlar oluşturabilirsiniz.

Kullanım Alanları:

  • Başlıklar ve sloganlar
  • Logo animasyonları
  • Açılış sayfaları
  • Bilgilendirici grafikler
  • Butonlar ve menüler

Hadi şimdi CSS ile svg yazı animasyonu yapımına geçelim. Tüm kodları aşağıda paylaşıyorum ayrıca paylaştığım örneği de inceleyebilirsiniz. CSS SVG Text Animation (codepen.io)

HTML

<div class="container">
    <svg width="100%" height="100%">
    
      <style>
     @import url("https://fonts.googleapis.com/css?  family=Lora:400,400i,700,700i");
        </style>
      
      <text x="50%" y="60%" text-anchor="middle"> 
        Serdar Karaca
      </text>
      
      
    </svg>
  </div>

CSS

body {
  background-color: black;
  margin: 0;
}

.container {
  height: 100vh;
}

svg text {
  font-familiy: Lora;
  letter-spacing: 10px;
  stroke: orange;
  font-size: 150px;
  font-weight: 700;
  stroke-width: 3;
  animation: textAnimate 5s infinite alternate;
}


@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset: 20%;
    fill:hsl(22%, 78%, 50%);
  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffset: -20%;
    fill: hsla(22%, 78%, 50%, 0%)
  }
}

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


The reCAPTCHA verification period has expired. Please reload the page.

Back To Top