Cara Membuat Animasi Teks 3D
Cara Membuat Animasi Teks 3D - Siapa yang tidak tahu teks 3D ? Pasti pada tahu semua yah. Nah, pada kesempatan kali ini saya akan membahas mengenai bagaimana Cara Membuat Animasi Teks 3D. Buat kalian yang ingin membuat animasi teks 3D tidak ada salahnya untuk mencoba tutorial berikut. Baik langsung saja kita mulai praktekan membuat animasi teks 3D berikut ini.
Langkah 1 : Cara Membuat Animasi Teks 3D
Pada kasus ini teks 3D yang akan saya buat yakni dengan bantuan sintak CSS3, baiklah silahkan buat satu file index.html dan ketikan sintak HTML untuk membuat struktur dan menambahkan konten teks untuk animasi 3D seperti berikut.
<div id="wrapper">
<h1 class="text">DUMETSCHOOL.</h1>
</div>
</body>
Langkah 2 : Cara Membuat Animasi Teks 3D
Langkah selanjutnya untuk membuat animasi 3D adalah mendesain konten teks menjadi animasi dengan memanfaatkan sintak CSS3, silahkan ketikan sintak CSS berikut untuk membuat animasi teks 3D.
@import url('https://fonts.googleapis.com/css?family=Modak');
body {
background: #fbc531;
}
#wrapper {
margin: 50px auto;
border-radius: 10px;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
#wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.text {
position: relative;
top: 0;
left: 0;
display: inline-block;
color: #1976D2;
cursor: pointer;
font-family: 'Modak', cursive;
font-size: 100px;
letter-spacing: 1px;
line-height: 50px;
transition: 0.2s ease-out;
text-shadow:
1px 1px white,
2px 2px white,
3px 3px white;
}
.text:hover {
top: -8px;
left: -8px;
color: white;
text-shadow:
1px 1px #1976D2,
2px 2px #1976D2,
3px 3px #1976D2,
4px 4px #1976D2,
5px 5px #1976D2,
6px 6px #1976D2;
}
.text:active {
top: 0;
left: 0;
text-shadow: 0 0 1px white;
}
Setelah semua sintak HTML dan CSS telah diketikan, silahkan simpan filenya kemudian kalian bisa buka pada browser masing - masing dan lihat hasilnya. Maka hasil teks 3D akan seperti pada gambar berikut.
Jika kalian arahkan kursor terhadap konten teks, maka akan terjadi perubahan animasi 3D pada teksnya.
Bagaimana, cukup mudah bukan Cara Membuat Animasi Teks 3D nya ? Baik, cukup sekian tutorial sederhana HTML dan CSS tentang bagaimana Cara Membuat Animasi Teks 3D, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
