Buat kesan animasi CSS yang kuat tanpa JavaScript

Artikel ini meneroka keupayaan CSS untuk membuat animasi web, meminimumkan keperluan untuk JavaScript. Kami akan membina beberapa animasi, membandingkan kekuatan dan batasan CSS terhadap JavaScript. Pemahaman asas CSS dan HTML diandaikan.

Takeaways utama:

• memanfaatkan CSS dan SVG untuk animasi kompleks, mengurangkan kod dan kesilapan.
• Master stroke-dasharray dan stroke-dashoffset untuk melukis animasi.
• Gunakan CSS untuk mewujudkan kesan menarik secara visual (seperti lilin berkedip) menggunakan bayang -bayang dan peralihan.
• menggunakan kelas pseudo dan pemilih saudara CSS untuk interaksi dinamik tanpa JavaScript.
• Mengiktiraf batasan CSS: penjujukan animasi kompleks, animasi lengkung, dan kawalan dinamik tertentu sering memerlukan JavaScript.
• Terokai CSS untuk animasi yang responsif, perkakasan yang dipercepatkan, berpotensi mengatasi JavaScript di Mobile.

Lukisan Animasi Contoh:

Animasi ini, mudah menipu, menarik logo.

kita mulakan dengan logo SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
 <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/>
 <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/>
</svg>

kami pada mulanya menyembunyikan mengisi menggunakan

. Kemudian, menggunakan fill-opacity: 0; dan stroke-dasharray: 1; dengan animasi, kami membuat kesan lukisan. Akhirnya, kami menghidupkan stroke-dashoffset: 1; hingga 1 untuk kesan lengkap. fill-opacity

animasi lilin CSS:

Contoh ini hanya menggunakan CSS (dan HTML) untuk membuat lilin dengan api berkedip. Animasi ini dicetuskan oleh kotak semak, tersembunyi dan dikawal dengan bijak menggunakan pemilih dan peralihan CSS. Flicker Flame dicapai dengan menghidupkan warna dan kedudukan latar belakangnya.

Animasi Pulse:

Animasi nadi mudah dibuat menggunakan

dan kerangka key, menunjukkan satu lagi teknik animasi CSS ringkas.

box-shadow

batasan CSS:

Walaupun kuat, animasi CSS mempunyai batasan. Penjujukan kompleks, animasi lengkung, dan kawalan dinamik tertentu lebih baik dikendalikan oleh perpustakaan JavaScript seperti Greensock.

Kesimpulan:

CSS menawarkan pendekatan yang diperkemas untuk banyak animasi, tetapi memahami batasannya adalah penting untuk pembangunan web yang cekap. Artikel ini menyediakan asas untuk meneroka potensi animasi CSS dan ketika untuk mengintegrasikan JavaScript untuk senario yang lebih kompleks.

Atas ialah kandungan terperinci Buat kesan animasi CSS yang kuat tanpa JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!