Buat efek teks 3D animasi

Sep 17, 2025

Bagaimana caranya

Kehilangan cinta oleh Kanada Jam3. adalah puisi interaktif yang sangat gelap dan indah dengan hati nyata tentang perasaan abadi di sekitar cinta yang hilang. Itu Tata Letak Situs Web dibangun menggunakan HTML5 dengan GSAP. Perpustakaan yang memberi daya pada animasinya, salah satu fitur yang paling mencolok paling visual adalah teks 3D animasinya yang benar-benar membawa puisi Cinta Lost untuk hidup.

Buat efek tipografi 3D interaktif

Itu terlihat mengesankan sekali, dan tidak sulit untuk dimasukkan ke dalam pekerjaan Anda sendiri untuk menciptakan yang menarik pengalaman pengguna ; Begini caranya.

Ingin membuat situs menarik Anda sendiri? Coba A. Pembangun Situs Web alat, dan menjaga hal-hal berjalan dengan lancar dengan memilih yang benar hosting web. layanan.

Love Lost's 3D text comes right out of the screen at the viewer — Teks 3D Love Lost datang keluar dari layar di pemirsa

01. MEMAKSIKAN DOKUMEN HTML

Langkah pertama adalah mendefinisikan struktur dokumen HTML. Ini termasuk wadah HTML yang memulai dokumen, yang berisi bagian kepala dan tubuh. Sementara bagian kepala terutama digunakan untuk memuat file CSS eksternal, bagian tubuh akan menyimpan konten halaman yang terlihat yang dibuat pada langkah 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; judul & gt; gerakan teks 3D & 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 yang terlihat

Konten HTML yang terlihat terdiri dari wadah artikel yang berisi teks yang terlihat. Bagian penting dari kontainer artikel adalah atribut 'data-animate', yang akan dirujuk oleh CSS untuk menerapkan efek visual. Teks di dalam artikel dibuat dari tag H1 untuk menunjukkan bahwa konten adalah judul utama halaman.

 & lt; artikel data-animate = "pindah" & gt;
  & lt; h1 & gt; halo di sana! & lt; / h1 & gt;
& lt; / artikel & gt;

03. Inisiasi CSS.

Buat file baru yang disebut 'Styles.css'. Kumpulan instruksi pertama mengatur wadah dan tubuh HTML halaman untuk memiliki latar belakang hitam, serta tidak ada jarak perbatasan yang terlihat. Putih juga ditetapkan sebagai warna teks default untuk semua elemen anak pada halaman untuk mewarisi; Menghindari warna hitam default dari konten pembuatan teks tampaknya tidak terlihat.

 html, body {
  Latar Belakang: # 000;
  Padding: 0;
  MARGIN: 0;
  Warna: #fff;
}

04. Wadah Animasi

Konten kontainer yang direferensikan dengan atribut 'data-animate' memiliki gaya spesifik yang diterapkan. Ukurannya diatur agar sesuai dengan ukuran penuh layar menggunakan unit pengukuran VW dan VH, serta sedikit diputar. Animasi yang disebut 'pindah' diterapkan, yang akan berlangsung selama 20 detik dan akan berulang kali.

 [data-animate = "pindah"] {
  Posisi: Relatif;
  Lebar: 100VW;
  Tinggi: 100VH;
  Opacity: 1;
  Animasi: Movein 20s tak terbatas;
  Teks-Align: Center;
  Transformasi: Putar (20DEG);
}

05. Inisiasi Animasi

Animasi 'pindah' yang direferensikan pada langkah sebelumnya memerlukan definisi menggunakan @keyframes. Bingkai pertama mulai dari 0% dari animasi menetapkan ukuran font default, posisi teks dan bayangan terlihat. Selain itu, item diatur dengan nol opacity sehingga awalnya tidak terlihat - yaitu. ditampilkan di luar pandangan.

 @keyframes movein {
  0% {
  Ukuran font: 1EM;
  Kiri: 0;
  Opacity: 0;
  Teks-bayangan: tidak ada;
  }
  *** Langkah 6 di sini
}

06. Bergaul ke tampilan

By using multiple shadows you can enhance the 3D effect — Dengan menggunakan beberapa bayangan Anda dapat meningkatkan efek 3D

Bingkai berikutnya ditempatkan pada 10% melalui animasi. Bingkai ini menetapkan opacity untuk sepenuhnya terlihat, menghasilkan teks secara bertahap dianimasikan menjadi tampilan. Selain itu, beberapa bayangan ditambahkan dengan nilai warna biru dan menurun untuk memberikan ilusi kedalaman 3D ke teks.

 10%
{
  Opacity: 1;
  bayangan teks:
  .2em -.2em 4px #aaa,
  .4em -.4em 4px # 777,
  .6em -.6em 4px # 444,
  .8em -.8em 4px # 111;
}
*** Langkah 7 di sini

07. Menyelesaikan animasi

Kusen akhir terjadi pada 80% dan pada akhir animasi. Ini bertanggung jawab untuk meningkatkan ukuran font dan memindahkan elemen ke kiri. Pengaturan baru juga diterapkan untuk bayangan teks untuk menghidupkan ke arah, sementara juga memudar teks dari tampilan dari frame 80% hingga 100%.

80% {
  Ukuran font: 8EM;
  Kiri: -8em;
  Opacity: 1;
}
100% {
  Ukuran font: 10EM;
  Kiri: -10em;
  Opacity: 0;
  bayangan teks:
  .02em -.02em 4px #aaa,
  .04em -.04em 4px # 777,
  .06em -.06em 4px # 444,
  .08em -.08em 4px # 111;
}
***

Catatan: Proyek apa pun yang Anda ikuti, miliki penyimpanan awan Itu bisa mengatasi sangat penting (panduan kami akan membantu).

Artikel ini awalnya diterbitkan dalam edisi 273 dari desainer web Majalah Desain Web Kreatif. Beli masalah 273 di sini atau berlangganan desainer web di sini .

Artikel terkait:

Buat efek teks neon yang bersinar
Cara men-debug animasi web
Buat storyboard untuk animasi web

Buat efek teks 3D animasi

01. MEMAKSIKAN DOKUMEN HTML

02. Konten HTML yang terlihat

03. Inisiasi CSS.

04. Wadah Animasi

05. Inisiasi Animasi

06. Bergaul ke tampilan

07. Menyelesaikan animasi

Bagaimana caranya - Artikel Terpopuler

Cara mematikan pemberitahuan web untuk Windows, MacOS dan Android

melakukan tes pengguna gratis dan cepat dengan UserLook

Gunakan ruang negatif untuk menarik tangan yang lebih baik

Cara menggambar gajah

Belajar menghidupkan untuk anak-anak

Cara membuat logo retro dengan perancang afinitas

Cara memahat mata meyakinkan dalam zbrush

Cara Meningkatkan Kinerja Situs E-commerce

Kategori