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:13637semak 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.
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.
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

Artikel ini akan membimbing anda bagaimana untuk membuat kesan mesin taip teks yang dinamik dan lebih menarik menggunakan CSS tulen.

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

steps() Animasi berkelip akan mensimulasikan kursor "putout" teks.

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;"

Sebelum membuat kesan menaip, untuk menghentikan kursor selepas huruf terakhir elemen sepenuhnya menaip (seperti mesin taip atau pemproses perkataan), kami akan membuat bekas untuk elemen

dan menambah typed-out: typed-out display: inline-block;

Buat animasi teks paparan

<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 (

dan

<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

Bagaimana untuk menghentikan kursor selepas surat terakhir elemen

typed-out Untuk menghentikan kursor huruf terakhir elemen

<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?

Animasi mesin taip sering digunakan di laman web seperti laman portfolio, terutamanya pada pereka dan laman web pemaju, yang digunakan untuk menyerlahkan kemahiran utama dan menambah rasa kreatif ke halaman, dengan itu menarik perhatian pembaca. Kesan mesin taip kadang -kadang digunakan di laman web blog dan halaman log masuk serta demonstrasi produk.

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!

JavaScript css for 样式表 display overflow border animation

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Cara membuat kesan mesin taip CSS untuk laman web anda

Artikel berkaitan