Landing Page Beranimasi

75 minitPertengahanCSSTransitions@keyframesAccessibilityResponsive design

Hasil

Landing page yang kemas, dengan butang dan kad yang bertindak balas dengan lancar terhadap hover dan fokus papan kekunci, hero dan ciri-ciri yang meluncur masuk semasa dimuatkan, yang tenang sepenuhnya untuk prefers-reduced-motion, dan menyusun semula pada sebarang skrin.

Objektif pembelajaran

Tambah transition yang lancar dan reka keadaan :hover, :focus-visible dan :active
Tulis animasi @keyframes dan kawal dengan duration, delay dan fill mode
Hormati prefers-reduced-motion supaya gerakan tidak membuat sesiapa rasa tidak selesa
Jadikan grid menyusun semula dengan @media query mobile-first

Prasyarat

Selesa dengan selector CSS, box model dan warna — lihat trek HTML & CSS
Disyorkan: projek Halaman Portfolio Peribadi (susun atur dan media query)

Tingkah laku yang dijangka

Butang bertukar warna dan terangkat sedikit semasa hover, dan menunjukkan cincin fokus yang jelas bila dicapai dengan kekunci Tab.
Kad ciri naik dengan lancar semasa hover.
Semasa dimuatkan, hero muncul perlahan dan meluncur masuk, kemudian tiga kad menyusul satu demi satu.
Bila kurang gerakan (reduced motion) diaktifkan dalam sistem pengendalian, semuanya muncul serta-merta tanpa gerakan.
Kad bertindan pada telefon dan tersusun sebaris tiga pada skrin yang lebih lebar.

Gerakan yang baik ialah maklum balas, bukan hiasan: ia memberitahu pengguna “ya, ini boleh diklik”, “di sinilah anda berada”, “ini baru sahaja muncul”. Dalam projek ini, HTML dan gaya asas sudah siap — anda akan menambah semua gerakan dalam style.css, satu milestone demi satu.

transition: Menganimasikan sesuatu property dengan lancar antara dua keadaan, contohnya dari biasa ke :hover.
@keyframes + animation: Memainkan urutan langkah dengan sendirinya — contohnya semasa halaman dimuatkan.
prefers-reduced-motion: Media feature yang bernilai reduce bila pengguna meminta peranti mereka mengurangkan gerakan (sesetengah orang rasa pening atau loya akibat animasi).

Animasikan transform dan opacity bila boleh. Pelayar boleh menganimasikannya dengan lancar tanpa mengira semula susun atur — menganimasikan width, top atau margin lebih mudah tersekat-sekat.

Animasi masuk dimainkan sekali semasa halaman dimuatkan. Sunting mana-mana CSS (atau tekan Run) untuk memuat semula pratonton dan melihatnya lagi.

Peringkat

Beri .btn transition yang pendek (antara 150ms dan 300ms terasa pantas) untuk background-color dan transform. Kemudian tambah:

• .btn:hover — latar lebih gelap dan angkatan kecil (transform: translateY(-2px)) • .btn:focus-visible — outline yang jelas dengan sedikit outline-offset, supaya pengguna papan kekunci nampak di mana mereka berada

Tekan Tab melalui halaman dalam pratonton untuk menguji cincin fokus.

Semakan

.btn ada transition yang pendek
Ada rule .btn:hover
Ada gaya :focus-visible yang kelihatan

Senarai semak penyiapan

Tandakan item ini apabila ia benar untuk projek anda. Projek selesai apabila setiap peringkat lulus dan setiap item ditanda.

Setiap kesan hover juga ada padanan untuk papan kekunci (:focus-visible / :focus-within)Transition interaksi pendek (bawah ~300ms) dan keseluruhan animasi masuk selesai dalam kira-kira satu saatSaya hanya menganimasikan transform dan opacitySaya hidupkan reduced motion dalam OS saya (atau DevTools pelayar → Rendering → Emulate CSS media) dan halaman muncul serta-merta tanpa gerakanHalaman kelihatan betul pada lebar telefon dan lebar desktop

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.