Cara Membuat Animasi Teks 3D

05/06/2018    Risman Hakim    185     Website

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.

<body>
    <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.

Cara Membuat Animasi Teks 3D

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 :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More