Rumah >hujung hadapan web >tutorial css >Cara membuat kesan mesin taip CSS untuk laman web anda
Cara membuat kesan mesin taip CSS untuk laman web anda
- 尊渡假赌尊渡假赌尊渡假赌asal
- 2025-02-08 10:20:13664semak imbas
CSS tulen mencipta kesan teks mesin taip yang menarik
mata teras:
- Kesan mesin taip CSS menjadikan kandungan laman web lebih dinamik dan menarik dengan secara beransur -ansur memaparkan teks, dan boleh digunakan untuk halaman log masuk, laman web peribadi dan demonstrasi kod. Kesan mesin taip
- boleh dibuat dengan menggunakan fungsi CSS
steps()untuk menukar lebar elemen teks dari 0% hingga 100%, dan untuk mensimulasikan kursor "putout" teks melalui animasi. - Kesan menaip boleh diselaraskan dengan meningkatkan atau mengurangkan bilangan langkah dan tempoh animasi menaip untuk menampung teks yang lebih panjang atau lebih pendek. Kesan mesin taip
- boleh digunakan bersamaan dengan animasi kursor yang berkelip untuk meningkatkan kesannya, dan kursor boleh disesuaikan dengan menyesuaikan sifat, warna, kekerapan berkedip, dan lain -lain.
border-right
Teks simulasi kesan mesin taip dipaparkan perkataan dengan perkataan, sama seperti menaip dalam masa nyata di hadapan anda.
Menambah kesan mesin taip dalam coretan teks membantu menarik pelawat laman web dan membuat mereka berminat untuk terus membaca. Kesan mesin taip boleh digunakan untuk pelbagai tujuan, seperti membuat halaman log masuk yang menarik, elemen panggilan-ke-tindakan, laman web peribadi, dan persembahan kod.
mudah untuk membuat kesan mesin taip
Mewujudkan kesan mesin taip adalah sangat mudah, anda hanya perlu mempunyai pengetahuan asas mengenai animasi CSS dan CSS untuk memahami tutorial ini.
Prinsip kerja kesan mesin taip adalah seperti berikut:
Animasi Typewriter secara beransur -ansur akan mengubah lebar elemen teks dari 0% hingga 100% dengan menggunakan fungsi CSS
- , dengan itu memaparkan elemen teks kami.
-
steps()Animasi berkelip akan mensimulasikan kursor "putout" teks. - Buat laman web kesan mesin taip
Pertama, mari buat halaman web untuk demonstrasi mesin taip. Ia akan mengandungi bekas
untuk teks mesin taip, dengan nama kelas: <div>
<code>typed-out
gaya gaya untuk bekas teks mesin taip
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code>
Sekarang kita mempunyai susun atur laman web, mari gaya untuk
dengan kelas "ditaip-keluar":
<div>
Sila ambil perhatian bahawa untuk membuat kesan mesin taip berkesan, kami telah menambah yang berikut: <pre class="brush:php;toolbar:false"><code class="language-css">.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</code></pre>
<p>
</p> <ul> dan <li> pastikan kandungan teks tidak dipaparkan sehingga kesan menaip bermula. <code>"overflow: hidden;"
"width: 0;" , buat kursor mesin taip.
"border-right: .15em solid orange;"
dan menambah typed-out: typed-out
display: inline-block;
<code class="language-css">.container {
display: inline-block;
}</code>
Animasi Typewriter akan membuat kesan verbatim untuk teks dalam elemen
yang akan dipaparkan. Kami akan menggunakan peraturan animasi CSS: typed-out
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code>
Seperti yang anda lihat, semua animasi ini adalah mengubah lebar elemen dari 0% hingga 100%.
Sekarang, kami menyertakan animasi ini dalam kelas typed-out kami dan menetapkan orientasi animasinya ke forwards untuk memastikan bahawa elemen teks tidak kembali ke width: 0 selepas animasi selesai:
<code class="language-css">.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</code>
elemen teks kami akan dipaparkan dari kiri ke kanan dengan cara yang lancar:
tambah langkah untuk mencapai kesan mesin taip
Setakat ini, teks kami telah dipaparkan, tetapi ia adalah cara yang lancar untuk tidak memaparkan verbatim teks. Ini adalah permulaan, tetapi jelasnya ia tidak kelihatan seperti kesan mesin taip.
Agar animasi ini untuk memaparkan verbatim elemen teks atau langkah demi langkah (sama seperti mesin taip), kita perlu membahagikan animasi menaip yang terkandung dalam kelas typed-out . Di sinilah fungsi CSS steps() dimainkan:
<code class="language-css">.container {
display: inline-block;
}</code>
Seperti yang anda lihat, kami menggunakan fungsi CSS steps() untuk membahagikan animasi menaip ke dalam 20 langkah.
Laraskan langkah -langkah untuk menaip lebih lama
Untuk menyesuaikan teks yang lebih lama, anda perlu meningkatkan langkah dan tempoh animasi menaip.
Laraskan langkah -langkah untuk menaip yang lebih pendek
Untuk menyesuaikan teks yang lebih pendek, anda perlu mengurangkan langkah dan tempoh animasi menaip.
Buat dan tetapkan animasi kursor berkelip
Nampaknya, mesin taip mekanikal asal tidak mempunyai kursor yang berkelip, tetapi menambahnya untuk meniru kesan kursor berkelip dari pemproses komputer/kata yang lebih moden telah menjadi tradisi. Animasi kursor berkelip membantu membuat teks dicetak menonjol dari elemen teks statik.
Untuk menambah animasi kursor berkelip ke animasi mesin taip kami, kami akan mula membuat animasi berkelip:
<code class="language-css">@keyframes typing {
from { width: 0 }
to { width: 100% }
}</code>
Di laman web kami, animasi ini akan mengubah warna sempadan sempadan elemen typed-out (digunakan sebagai kursor untuk kesan mesin taip) dari telus ke oren.
Kami menyertakan animasi ini dalam peraturan kelas typed-out dan menetapkan sifat animasinya untuk infinite untuk membuat kursor hilang dan muncul semula selama -lamanya setiap 0.8 saat:
<code class="language-css">.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}</code>
kod untuk menyesuaikan kesan menaip berkelip
kita boleh membuat kursor kurus atau lebih tebal dengan menyesuaikan atribut border-right: .15em solid orange;, atau anda boleh membuat warna kursor berbeza, berikannya border-radius, menyesuaikan kekerapan kelipannya, dan sebagainya.
unsur menggabungkan animasi teks mesin taip
Sekarang anda tahu bagaimana membuat kesan mesin taip di CSS, sudah tiba masanya untuk menunjukkan beberapa kes penggunaan praktikal dan relevan untuk kesan mesin taip ini.
Kesimpulan
Dalam artikel ini, kita faham betapa mudahnya untuk membuat teks "mesin taip" animasi menggunakan CSS. Kesan menaip ini pasti dapat menambah keseronokan dan menyeronokkan ke halaman anda.
Walau bagaimanapun, ia mungkin bernilai amaran lembut pada akhirnya. Teknik ini lebih baik digunakan untuk sedikit teks bukan kritikal, hanya untuk menambah sedikit keseronokan tambahan. Tetapi berhati-hati untuk tidak terlalu bergantung pada itu, kerana terdapat beberapa batasan untuk menggunakan animasi CSS seperti ini. Pastikan untuk menguji teks mesin taip anda pada pelbagai peranti dan saiz viewport, kerana hasilnya mungkin berbeza mengikut platform. Juga pertimbangkan pengguna akhir yang bergantung kepada teknologi bantuan, idealnya, beberapa ujian kebolehgunaan boleh dilakukan untuk memastikan anda tidak menimbulkan kesulitan kepada pengguna. Kerana anda boleh melakukan sesuatu dengan CSS tulen tidak semestinya bermakna anda sepatutnya. Jika kesan mesin taip penting bagi anda dan anda mahu menggunakannya untuk kandungan yang lebih kritikal, mungkin sekurang -kurangnya mempertimbangkan penyelesaian JavaScript juga.
Bagaimanapun, saya harap anda menikmati siaran ini dan ia membuat anda berfikir tentang perkara -perkara lain yang boleh anda lakukan dengan animasi CSS untuk menambah keseronokan dan menyeronokkan ke halaman anda.
soalan yang sering ditanya mengenai membuat kesan mesin taip CSS
Akhirnya, mari kita jawab beberapa soalan yang paling biasa tentang cara membuat kesan mesin taip di CSS.
- Apakah kesan mesin taip?
"Kesan Typewriter" adalah teknik animasi yang membuat rentetan teks muncul perkataan dengan perkataan pada skrin seolah -olah ia ditaip dalam masa nyata oleh mesin taip. Kesan ini biasanya dibuat dengan JavaScript, tetapi ia juga boleh dilaksanakan menggunakan CSS sahaja, seperti yang ditunjukkan dalam artikel ini.
- Apakah animasi mesin taip?
mesin taip mencetak teks satu huruf pada satu masa. Animasi Taip adalah animasi yang meniru menaip mesin taip, menyampaikan teks dengan satu huruf pada satu masa. Ia adalah kesan animasi yang popular di banyak laman web.
- Bagaimana membuat teks animasi menaip dalam CSS?
CSS moden menyediakan pelbagai alat untuk membuat animasi, termasuk animation, @keyframes, steps(). Alat ini digunakan untuk memaparkan teks secara beransur -ansur yang pertama kali tersembunyi melalui atribut overflow.
- Bagaimana menggunakan CSS untuk membuat animasi mesin taip yang disesuaikan?
Membuat animasi mesin taip yang disesuaikan dengan CSS melibatkan penggunaan frame dan sifat CSS untuk mengawal bagaimana teks kelihatan dan berkelakuan semasa menaip pada skrin. Anda boleh membuatnya disesuaikan dengan mendedahkan beberapa parameter animasi sebagai pembolehubah CSS (sifat tersuai) supaya anda dapat dengan mudah mengubahnya dalam lembaran styles anda. Contohnya:
Dalam kod CSS ini, kami mentakrifkan sifat tersuai (
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code>) untuk membuat animasi disesuaikan. Anda boleh menukar nilai lalai dengan mengubahsuai sifat -sifat ini.
--typewriter-text
--typewriter-duration
- dicetak sepenuhnya?
-
typed-outUntuk menghentikan kursor huruf terakhir elemen dalam animasi mesin taip CSS, anda boleh menggunakan animasi CSS dan atribut
<code class="language-html"><!doctype html>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</code>
Di CSS di atas, animasi mesin taip secara beransur -ansur meningkatkan lebar unsur -unsur dalam bekas, dengan berkesan menaip teks. Hartanah .typewriter ditetapkan kepada animation-fill-mode untuk memastikan bahawa animasi tetap muktamad (dimainkan sepenuhnya) selepas selesai. Dengan tetapan ini, kursor akan berkelip di elemen forwards selepas ia dicetak sepenuhnya. typed-out
- Apakah beberapa contoh laman web yang berkesan menggunakan kesan mesin taip?
Atas ialah kandungan terperinci Cara membuat kesan mesin taip CSS untuk laman web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!