Cara membuat kesan mesin taip CSS untuk laman web anda-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Cara membuat kesan mesin taip CSS untuk laman web anda

尊渡假赌尊渡假赌尊渡假赌

Feb 08, 2025 am 10:20 AM

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

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

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;'>.typed-out { overflow: hidden; border-right: .15em solid orange; font-size: 1.6rem; width: 0; }</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

.container {
  display: inline-block;
}

Animasi Typewriter akan membuat kesan verbatim untuk teks dalam elemen

yang akan dipaparkan. Kami akan menggunakan peraturan animasi

CSS: typed-out

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

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:

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

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:

.container {
  display: inline-block;
}

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:

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

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:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

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

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

) 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

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

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!

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

Artikel Berkaitan

@KeyFrames vs CSS Transitions: Apakah perbezaannya?May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity:@keyframesallowsfordetailedanimationseSseSeSs, whileCstransitionShandlesImplestateShanges.usecsstransitionsforhovereffectsLikeButtonColorchanges, dan@keyframesforintricateanimation.

Menggunakan halaman CMS untuk pengurusan kandungan tapak statikMay 13, 2025 am 09:24 AM

Saya tahu, saya tahu: terdapat satu tan pilihan sistem pengurusan kandungan yang tersedia, dan sementara saya telah menguji beberapa, tidak ada yang benar -benar menjadi satu, y ' tahu? Model harga pelik, penyesuaian yang sukar, sesetengahnya akhirnya menjadi keseluruhan &

Panduan Terbaik untuk Menghubungkan Fail CSS di HTMLMay 13, 2025 am 12:02 AM

Menghubungkan fail CSS ke HTML boleh dicapai dengan menggunakan unsur -unsur dalam sebahagian HTML. 1) Gunakan tag untuk menghubungkan fail CSS tempatan. 2) Pelbagai fail CSS boleh dilaksanakan dengan menambahkan beberapa tag. 3) Fail CSS luaran menggunakan pautan URL mutlak, seperti. 4) Pastikan penggunaan laluan fail yang betul dan pesanan pemuatan fail CSS, dan mengoptimumkan prestasi boleh menggunakan preprocessor CSS untuk menggabungkan fail.

CSS Flexbox vs Grid: Kajian KomprehensifMay 12, 2025 am 12:01 AM

Memilih Flexbox atau Grid bergantung kepada keperluan susun atur: 1) Flexbox sesuai untuk susun atur satu dimensi, seperti bar navigasi; 2) Grid sesuai untuk susun atur dua dimensi, seperti susun atur majalah. Kedua -duanya boleh digunakan dalam projek untuk meningkatkan kesan susun atur.

Cara memasukkan fail CSS: Kaedah dan amalan terbaikMay 11, 2025 am 12:02 AM

Cara terbaik untuk memasukkan fail CSS adalah menggunakan tag untuk memperkenalkan fail CSS luaran di bahagian HTML. 1. Gunakan tag untuk memperkenalkan fail CSS luaran, seperti. 2. Untuk pelarasan kecil, css sebaris boleh digunakan, tetapi harus digunakan dengan berhati -hati. 3. Projek besar boleh menggunakan preprocessors CSS seperti SASS atau kurang untuk mengimport fail CSS lain melalui @import. 4. Untuk prestasi, fail CSS harus digabungkan dan CDN harus digunakan, dan dimampatkan menggunakan alat seperti CSSNANO.

Flexbox vs Grid: Sekiranya saya belajar kedua -duanya?May 10, 2025 am 12:01 AM

Ya, youdyhouldlearnbothflexboxandgrid.1) flexboxisidealforone-dimensi, flexiblelayoutslikenavigasiMenus.2)

Mekanik Orbital (atau bagaimana saya mengoptimumkan animasi kerangka utama CSS)May 09, 2025 am 09:57 AM

Apa yang kelihatan seperti refactor kod anda sendiri? John Rhea memisahkan animasi CSS lama yang dia tulis dan berjalan melalui proses pemikiran mengoptimumkannya.

Animasi CSS: Adakah sukar untuk mencipta mereka?May 09, 2025 am 12:03 AM

Csanimationsarenotinherenthardbutrequirepracticeandundunderpanderofcsspropertiesandtimingfunctions.1) startwithsimpleanimationslikescalingabuttonhoverusingkeyframes.2)

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

4 minggu yang laluByDDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang laluByDDD

Nordhold: Sistem Fusion, dijelaskan

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Tunjukkan Lagi

Topik panas

1673

1429

1333

1278

1257