Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3

Labkom99.com –  Kali ini belajar membuat efek animasi teks berkedip dengan HTML dan CSS3. Efek khusus ini membagi teks menjadi satu eleme dalam struktur HTML, dan kemudian menggunakan kode CSS3 untuk membuat lampu fluoresen dan efek khusus berkedip.

Alat / Bahan Baku

Notepad

Tools pemrograman HTML lain

Perhatian 

Untuk membuat efek animasi teks berkedip pada bagian ini sebaiknya memahami terlebih dahulu tentang Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language, Struktur dasar HTML , cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Untuk hasil dari membuat efek animasi teks berkedip bisa dilihat pada gambar berikut ini. 

Metode / Langkah

Untuk perintah HTML yang digunakan sangat simple sekali hanya menggunakan perintah <div class=”text-effect”>. Perintah tersubut berfungsi untuk tesk yang akan diberi animasi. Nah ini dia kode HTMLnya :

<div class="text-effect">
    <span>L</span>
    <span>A</span>
    <span>B</span>
    <span>K</span>
    <span>O</span>
    <span>M</span>
    <span>9</span>
    <span>9</span>
</div>

 Belajar HTML dan CSS3 yang dapat anda pelajari :

Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan

Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail

Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3

Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS

Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG

Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna

Belajar HTML5 Dan Canvas Membuat Bola Api Luncur 

Cukup simple bukan kode HTMLnya, berikutnya labkom99 akan membahas CSS3 yang digunakan. Perhatikan fungsi CSS3 yang digunakan berikut ini : 

.demo{background: #2c2c54; }
.text-effect{
    color: #fff;
    font-family: 'Monoton', cursive;
    font-size: 100px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto;
    display: block;
    position: relative;
}
.text-effect span{ animation: animate linear 2000ms infinite; }
.text-effect span:nth-child(1n){ animation-delay: 0s; }
.text-effect span:nth-child(2n){ animation-delay: 100ms; }
.text-effect span:nth-child(3n){ animation-delay: 200ms; }
.text-effect span:nth-child(4n){ animation-delay: 300ms; }
.text-effect span:nth-child(5n){ animation-delay: 400ms; }
.text-effect span:nth-child(6n){ animation-delay: 500ms; }
.text-effect span:nth-child(7n){ animation-delay: 600ms; }
.text-effect span:nth-child(8n){ animation-delay: 700ms; }
.text-effect span:nth-child(9n){ animation-delay: 800ms; }
.text-effect span:nth-child(10n){ animation-delay: 900ms; }
@keyframes animate{
    0%{ opacity: 0.3; }
    100%{
       opacity:1;
       text-shadow: 0 0 80px Red,0 0 30px orange,0 0 6px DarkRed;
    }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 65px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 50px; }
}
@media only screen and (max-width: 479px){
    .text-effect{ font-size: 36px; }
}
@media only screen and (max-width: 359px){
    .text-effect{ font-size: 27px; }
}

Fungsi  .text-effect inilah yang digunakan untuk mengatur font dan posisi font. Dan untuk mengatur animasinya terletak pada fungsi .text-effect span{ animation: animate linear 2000ms infinite; } kalian bisa mengaturnya kecepatan kedipan pada tesk. Dan demonya kira – kira seperti halaman berikutnya :