CSS ile SVG Yazı Animasyonu
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 Yorum Yazın