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.