Meydan okuma - Animasyonlu hero

Animasyon ve gradyanlarla bir hero bölümü kurarsın.

Animasyonlu hero iskeleti

Animasyonlu bir hero bölümü, sayfanın ilk ekranında dikkat çeker. .hero kabına linear-gradient ile degrade arka plan verilir; başlık @keyframes ile tanımlanan bir animasyonla yukarı süzülür.

@keyframes heroFade içinde from ve to durakları yazılır; transform: translateY(...) ile dikey hareket verilir. .hero-title etiketine animation: heroFade 1.2s ease-out yazınca animasyon çalışır. Üç bildirim birleşince başlık sessizce belirir.

Uygulama Hero CSS'ini tamamla

Aşağıdaki CSS'i tamamla. .hero kabına background: linear-gradient(135deg, #6366f1, #ec4899) ile degrade arka plan ver. @keyframes heroFade bildirimi yaz; from durakta transform: translateY(-30px), to durakta transform: translateY(0) olsun. .hero-title etiketinde animation: heroFade 1.2s ease-out bildirimi yaz.

Örnek çözümü göster

/* hero bölümü */
.hero {
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

/* animasyon tanımı */
@keyframes heroFade {
  from { transform: translateY(-30px); }
  to { transform: translateY(0); }
}

/* başlık */
.hero-title {
  animation: heroFade 1.2s ease-out;
}

Kendini test et

animation-name değerini yaz

.hero-title {
  animation-name: ____;
  animation-duration: 1.2s;
}

Cevabı göster

.hero-title {
  animation-name: heroFade;
  animation-duration: 1.2s;
}

Hero parçalarını anlamına eşle

@keyframes

Animasyon duraklarını tanımlar
animation-name

Çalışacak animasyon adı
linear-gradient

Degrade arka plan verir
transform: translateY

Dikey hareket yaratır
@keyframes bloğunda duraklar hangi anahtar sözcüklerle işaretlenir?
```
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
```
- from ve to
- start ve end
- begin ve finish
- first ve last
Cevabı göster

from ve to — Doğru. from başlangıç, to bitiş duraklarını işaretler; yüzde değerleri de kullanılabilir.

Sıradaki ders: Meydan okuma - Sözde element kartı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler