Labkom99.com  Kali ini belajar membuat efek animasi teks berkedip dengan HTML dan CSS3. Efek khusus ini membagi teks menjadi satu elemen bentang 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 LanguageStruktur dasar HTML , cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Metode / Langkah
Untuk hasil dari membuat efek animasi teks berkedip bisa dilihat pada gambar berikut ini. 
Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3

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 :

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 dibawah ini :



L
A
B
K
O
M
9
9

Untuk kode lengkap Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3 nya sudah labkom99 siapkan dibawah ini :

<html>
<head>
<title> Labkom99.com - Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3</title>
<style>
.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; }
}
</style>
    <body>
     <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>
    </body>
</head>
</html>

Selamat Mencoba ....!!!

Komentar