Sitemize statik olarak modern bir hava kattıktan sonra, şimdi işleri biraz daha dinamikleştirme ve canlandırma zamanı. 6. Dersimizde, CSS'in en eğlenceli ve güçlü özelliklerinden biri olan CSS Animasyonlarını (@keyframes) öğreneceğiz. Hedefimiz, blog sitende duyurular, güncellemeler veya önemli ipuçları için kullanabileceğin, ziyaretçinin gözünü yormadan dikkatini çekecek hareketli bir Custom Animated Notification (Canlı Bildirim Kutusu) tasarlamak.
6. Ders: CSS Animasyonları ve Canlı Bildirim Kutusu Tasarımı
CSS'te iki tür hareket mekanizması vardır: transition (iki durum arasındaki yumuşak geçiş) ve animation (başlangıcı, gelişmesi ve sonu olan bağımsız döngüler). Biz bu derste çok daha esnek olan ikinci yöntemi, yani gerçek animasyonları inceleyeceğiz.
1. Animasyonun Temeli: @keyframes Nedir?
Bir CSS animasyonu oluşturmak için tarayıcıya hareketin aşamalarını anlatmamız gerekir. Bunu @keyframes (anahtar kareler) ile yaparız. Yüzdelik dilimler (0% başlangıç, 100% bitiş) kullanarak elementin hangi saniyede ne yapacağını söyleriz.
Basit bir nefes alma (büyüme-küçülme) animasyonu örneği:
@keyframes nefesAl {
0% { transform: scale(1); }
50% { transform: scale(1.05); } /* Ortada biraz büyüsün */
100% { transform: scale(1); } /* Sonda eski haline dönsün */
}
Bu animasyonu bir elemente bağlamak için ise şu parametreleri kullanırız:
.element { animation-name: nefesAl; /* Çalışacak keyframes adı */ animation-duration: 3s; /* Animasyonun toplam süresi */ animation-iteration-count: infinite; /* Sonsuza kadar tekrar etsin */ animation-timing-function: ease-in-out; /* Yumuşak başlasın ve bitsin */ }
2. Pratik Uygulama: Blogger İçin Canlı Bildirim Kutusu
Blogunun sağ alt köşesinde veya yazıların hemen üzerinde durabilecek, hafifçe titreyen ve parlayan canlı bir bildirim/duyuru kutusu yapalım. Sitenin kod yapısını hafif tutmak için ikon kullanmak yerine saf CSS border ve animasyon hilelerinden yararlanacağız.
CSS Kodlarımız:
/* Bildirim Kutusunun Ana Gövdesi */
.animated-notify {
display: flex;
align-items: center;
gap: 15px;
background-color: #1e293b; /* Koyu modern arka plan */
color: #f8fafc;
padding: 12px 20px;
border-radius: 30px; /* Tam oval görünüm */
border-left: 4px solid #38bdf8; /* Sol tarafta mavi vurgu çizgisi */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
font-family: sans-serif;
font-size: 14px;
max-width: 350px;
margin: 20px auto;
position: relative;
}
/* Soldaki Canlı Sinyal İkonu (Saf CSS) */
.notify-signal {
width: 10px;
height: 10px;
background-color: #38bdf8;
border-radius: 50%;
position: relative;
}
/* Sinyalin arkasındaki dalgalanma efekti için animasyonlu gölge */
.notify-signal::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #38bdf8;
border-radius: 50%;
top: 0;
left: 0;
/* Dalgalanma animasyonunu buraya bağlıyoruz */
animation: dalgaEfekti 2s infinite ease-out;
}
/* --- ANIMASYON TANIMLAMALARI (KEYFRAMES) --- */
/* 1. Dalgalanma (Pulse) Animasyonu */
@keyframes dalgaEfekti {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(3.5); /* Dışarı doğru büyüsün */
opacity: 0; /* Büyürken tamamen şeffaflaşsın */
}
}
/* 2. Dikkat Çekme (Hafif Titreme) Animasyonu - Kutunun kendisine bağlayacağız */
.animated-notify {
/* Kutunun her 5 saniyede bir hafifçe sallanmasını sağlayalım */
animation: hafifSalla 5s infinite ease-in-out;
}
@keyframes hafifSalla {
0%, 90%, 100% { transform: rotate(0deg); }
92% { transform: rotate(3deg); }
94% { transform: rotate(-3deg); }
96% { transform: rotate(2deg); }
98% { transform: rotate(-2deg); }
}
Ders Sonu Ödevi
Blogger paneline git, yeni bir HTML/JavaScript bileşeni ekle (veya şablonun içine doğrudan göm) ve şu HTML kodunu yapıştır:
<div class='animated-notify'>
<div class='notify-signal'></div>
<div class='notify-text'>
<strong>Yeni İpucu:</strong> CSS animasyonları ile siteni canlandır!
</div>
</div>
Yukarıdaki CSS kodlarını da eklediğinde, soldaki mavi noktanın arkasından sürekli bir radar dalgası yayıldığını ve kutunun birkaç saniyede bir ziyaretçinin gözünü yormayacak şekilde hafifçe titreyip kendini hatırlattığını göreceksin. css,ders,animasyonlar
Hiç yorum yok:
Yorum Gönder