Cara membuat efek mengetik animasi

Sep 12, 2025

Bagaimana caranya

Saat digunakan dengan baik, Animasi css. dapat menambah minat dan kepribadian ke situs Anda. Dalam artikel ini, kita akan berjalan melalui cara membuat efek animasi yang akan membuat tipografi Anda muncul secara bertahap, seolah-olah itu diketik pada mesin tik. Anda dapat melihat contoh animasi dalam aksi di situs untuk Crypton. , Bot perdagangan cryptocurrency. Efeknya mengesankan dan mudah diimplementasikan juga.

Untuk cara lain yang mudah untuk menciptakan desain web yang layak, cobalah yang luar biasa Pembangun Situs Web alat, atau atas hosting web. layanan. Atau, baca untuk mencari tahu cara mencapai animasi ini di situs Anda sendiri.

Jelajahi perbatasan baru animasi CSS

01. Inisiasi Dokumen

Langkah pertama adalah memulai struktur halaman web. Ini terdiri dari wadah HTML yang bertanggung jawab untuk menyimpan bagian kepala dan tubuh. Sedangkan tanggung jawab utama bagian kepala adalah memuat CSS eksternal, bagian tubuh akan menyimpan konten HTML yang dibuat pada langkah 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; judul & gt; efek mengetik & lt; / judul & gt;
& lt; tautan rel = "stylesheet" type = "teks / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; tubuh & gt;
*** Langkah 2 di sini
& lt; / body & gt;
& lt; / html & gt;

02. Konten HTML

Konten HTML terdiri dari wadah yang menggunakan kelas 'mengetik'. Ini akan digunakan oleh CSS untuk menerapkan efek mengetik ke elemen anak. Elemen konten anak dibuat dari tag H1, tetapi Anda dapat menggunakan elemen lain seperti 'P' untuk membuat elemen sebagai paragraf.

 & lt; div class = "mengetik" & gt;
  & lt; h1 & gt; letakkan judul Anda di sini ... & lt; / h1 & gt;
& lt; / div & gt;

03. Inisiasi CSS.

Buat file yang disebut 'Styles.css'. Langkah pertama CSS mendefinisikan dokumen dan wadah tubuh untuk menutup jendela browser penuh tanpa spasi perbatasan yang terlihat. Warna default untuk latar belakang halaman hitam dan warna teks putih juga diatur dalam langkah ini. Elemen konten dalam halaman akan mewarisi warna yang ditetapkan dalam langkah ini sebagai warna default mereka.

 Tubuh, html {
  Tampilan: blok;
  Lebar: 100%;
  Tinggi: 100%;
  Latar Belakang: # 000;
  Warna: #fff;
  Padding: 0;
  MARGIN: 0;
}

04. Mengetik anak-anak

Semua anak dalam wadah pengetikan diatur untuk menampilkan lebih dari satu baris tanpa menggunakan pembungkus teks. Yang paling penting, elemen-elemen anak ini memiliki animasi 'mengetik' yang diterapkan pada mereka. Animasi ini diatur untuk bermain lebih dari lima detik dengan 50 frame snapshot - memungkinkan efek mengetik terhuyung-huyung.

 .typing & gt; * {
  Overflow: Tersembunyi;
  ruang putih: sekarangRAP;
  Animasi: Typinganim 5s langkah (50);
}

05. Wajah mata

Efeknya juga disertai dengan wajah animasi yang tampaknya menceritakan teks yang diketik. Langkah ini menciptakan mata wajah ini sebagai elemen 'virtual' CSS menggunakan setelah pemilih. Mata ditempatkan relatif terhadap teks induk, dengan kontennya ditetapkan sebagai dua karakter teks dot.

 .typing & gt; *::setelah{
  kandungan: ". .";
  Tampilan: blok;
  Posisi: absolut;
  TOP: 1EM;
  kiri: .35em;
}

06. Wajah Mulut.

Seperti dengan mata, mulut wajah terbuat dari elemen virtual CSS - kali ini menggunakan sebelum pemilih. Mulut diposisikan dalam kaitannya dengan elemen teks induk, serta memiliki jari-jari perbatasan muncul dengan bentuk bulat.

Itu Typingspeak. animasi diterapkan; Ini akan berlangsung selama 0,5 detik menggunakan dua frame animasi. Dengan animasi diulang lima kali, waktu animasi total akan 2,5 detik.

 .typing & gt; *::sebelum{
  kandungan: "";
  Posisi: absolut;
  Tampilan: blok;
  TOP: 2.1em;
  kiri: .25em;
  Lebar: 1EM;
  Tinggi: .1em;
  BORDER-RADIUS: 100%;
  latar belakang: #fff;
  Animasi: Typingspeak .5s langkah (2);
  animasi-iterasi-hitungan: 5;
}

07. Definisi Animasi

Langkah ini mendefinisikan animasi yang dirujuk oleh elemen yang dibuat dalam langkah sebelumnya. Itu Typinganim. Animasi yang telah digunakan untuk efek mengetik mengubah elemennya dari tidak ada lebar hingga lebar penuh. Itu Typingspeak. Animasi yang digunakan untuk mulut wajah mengubah elemennya agar tidak muncul rata agar lebih terbuka.

 @Keyframes Typinganim {
  dari {lebar: 0}
  untuk {lebar: 100%}
}
@KeyframespeakPeak {
  0% {Lebar: 1EM; Tinggi: .1em}
  100% {Lebar: 1EM; tinggi: .5em; }
}
***

Mendapat file desain untuk disimpan?Tingkatkan Anda penyimpanan awan Jadi itu terserah pekerjaan.

Artikel ini awalnya diterbitkan dalam menerbitkan 275 dari desainer Web Desain Web Kreatif. Beli masalah 275 di sini atau berlangganan desainer web di sini .

Artikel terkait:

Buat Animasi UI Slick
Memahami Properti Tampilan CSS
Buat efek teks uap animasi

Cara membuat efek mengetik animasi

01. Inisiasi Dokumen

02. Konten HTML

03. Inisiasi CSS.

04. Mengetik anak-anak

05. Wajah mata

06. Wajah Mulut.

07. Definisi Animasi

Bagaimana caranya - Artikel Terpopuler

Buat tekstur dengan alat cap pola

Cara Memahat Hidung Manusia di Zrush: 4 Langkah Mudah

Ciptakan Sinar Tuhan di V-Ray

Desainer Affinitas: Cara Menggunakan Persona Ekspor

Tingkatkan keterampilan konsep seni Anda di Photoshop

Cara melukis potret atmosfer di Photoshop

mendokumentasikan sistem desain Anda dengan fraktal

Cara Memahat dan Pose Kepala Kartun di Zbrush

Kategori