CSS yanıp sönen yazı efektini sitenize ekleyerek daha dinamik bir içerik elde edebilirsiniz. Sizde sitenize yanıp sönen yazı efekti eklemek istiyorsanız aşağıdaki adımları takip ederek sitenize ekleyin.
CSS Yanıp sönen yazı efekti ne işe yarar, nerede kullanılır?
CSS yanıp sönen yazı efekti sitenizde parlak ve hareketli bir yazı bütünü oluşturmaya yarar. Bu yazılar genellikle duyuru, kampanya, indirim gibi dikkat çekilmek istenilen alanlarda kullanılır.
Siteme hangi kodu eklemeliyim?
Aşağıdaki kodu sitenizdeki yazıyı eklemek istediğiniz alana yapıştırıp düzenleyerek faydalanabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<style>
.yanipson {
animation: blinker 0.9s linear infinite;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
@keyframes blinker {
50% { opacity: 0; }
}
</style>
</head>
<body>
<p class="yanipson">Yanıp Sönen Yazı</p>
</body>
</html>
Yukarıdaki kodu ekledikten sonra sayfayı kaydedin veya değişiklik yaptığınız dosyayı FTP ile yükleyin.
Yanıp sönme hızını nasıl ayarlarım?
Kod içerisinde bulunan blinker 0.9s
kısmındaki 0.9’u ne kadar artırırsanız o kadar yavaş, ne kadar düşük yaparsanız o kadar hızlı yanıp sönecektir.
Örneğin blinker 0.2
yaptığınız zaman çok daha hızlı bir şekilde yanıp sönecektir.
Yanının rengini, boyutunu nasıl değiştirim?
Yazının rengini yine <style>
tagı içerisinde bulunan;
color: #1c87c9;
kısmındaki #’den sonraki rakamlar renginizin kodudur.
font-size: 30px;
kısmındaki 30 rakamı yazınızın büyüklüğünü ifade eder ne kadar artarsa o kadar büyür, ne kadar azalırsa o kadar küçülür.