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

Gaya CSS peringkat seterusnya untuk kursorApr 23, 2025 am 11:04 AM

Kursor adat dengan CSS adalah hebat, tetapi kita boleh mengambil sesuatu ke peringkat seterusnya dengan JavaScript. Menggunakan JavaScript, kita boleh beralih antara negeri kursor, letakkan teks dinamik dalam kursor, gunakan animasi kompleks, dan gunakan penapis.

Dunia bertembung: Pengesanan Perlanggaran Kerangka Key menggunakan pertanyaan gayaApr 23, 2025 am 10:42 AM

Animasi CSS interaktif dengan unsur -unsur yang menghilangkan satu sama lain kelihatan lebih masuk akal pada tahun 2025. Walaupun tidak perlu untuk melaksanakan pong dalam CSS, peningkatan fleksibiliti dan kuasa CSS mengukuhkan kecurigaan Lee '

Menggunakan penapis latar belakang CSS untuk kesan UIApr 23, 2025 am 10:20 AM

Petua dan cara untuk menggunakan harta penapis latar belakang CSS ke antara muka pengguna gaya. Anda akan belajar bagaimana untuk meletakkan penapis latar belakang di antara pelbagai elemen, dan mengintegrasikannya dengan kesan grafik CSS yang lain untuk membuat reka bentuk yang rumit.

SMIL ON?Apr 23, 2025 am 09:57 AM

Nah, ternyata ciri-ciri animasi terbina dalam SVG ' s tidak pernah ditamatkan seperti yang dirancang. Pasti, CSS dan JavaScript lebih mampu membawa beban, tetapi ia baik untuk mengetahui bahawa SMIL tidak mati di dalam air seperti sebelumnya

'Cantik' berada di mata penontonApr 23, 2025 am 09:40 AM

Yay, let ' s melompat untuk teks-wrap: Pretty Landing dalam Pratonton Teknologi Safari! Tetapi berhati -hatilah bahawa ia ' s berbeza dari bagaimana ia berfungsi dalam pelayar kromium.

CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

Kemas kini trik CSS ini menyoroti kemajuan yang ketara dalam almanak, penampilan podcast baru-baru ini, panduan kaunter CSS baru, dan penambahan beberapa penulis baru yang menyumbang kandungan berharga.

Ciri tailwind ' s @ply lebih baik daripada bunyiApr 23, 2025 am 09:23 AM

Kebanyakan masa, orang mempamerkan ciri-ciri Tailwind ' Apabila dipamerkan dengan cara ini, @apply tidak menjanjikan sama sekali. Jadi obvio

Rasa seperti saya tidak mempunyai pelepasan: perjalanan ke arah penyebaran yang warasApr 23, 2025 am 09:19 AM

Menggunakan seperti idiot datang ke ketidakcocokan antara alat yang anda gunakan untuk menggunakan dan ganjaran dalam kerumitan dikurangkan berbanding kerumitan yang ditambah.

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

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang laluByDDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

4 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.