Labkom99.comMembuat efek animasi teks kartun dengan HTML CSS3 dan Google font. Efek anamisi tesk kartun ini dibuat dengan menggunakan google font yang indah kreatif keren. Bukan tesk saja Google font yang digunakan ini juga mendukung huruf angka dan simbol. Dengan menggunkan HTML dan CSS3 warna di kombinasikan dengan Google font yang keren.
Membuat Efek Animasi Teks Kartun Dengan HTML CSS3 Dan Google Font

Alat / Bahan Baku
Notepad
Tools pemrograman HTML lain

Perhatian 
Untuk membuat efek animasi teks kartun 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 Bagaimana Cara Membuat Template HTML

Sebelumnya Labkom99 juga sudah menuliskan beberapa artikel tentang cara membuat efek animasi dengan berbagai model dengan HTML dan CSS.

Metode / Langkah
Utuk dapat Membuat efek animasi tesk kartun dengan HTML CSS3 dan Google font langkah pertama yang dilakukan adalah menyiapkan google font yang akan digunakan 

<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch:700&display=swap" rel="stylesheet"> 

Kemudian menyiapkan CSS3 yang akan digunakan berikut ini :

.demo{ background: #222; }
.text-effect{
    color: #ffff00;
    font-family: 'Cabin Sketch', cursive;
    font-size: 100px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    position: relative;
}
.text-effect span{
    display: inline-block;
    animation: animate 0.5s linear infinite both;
}
.text-effect span:nth-child(1),
.text-effect span:nth-child(4),
.text-effect span:nth-child(7),
.text-effect span:nth-child(10){
   color: #4cd137;
}
.text-effect span:nth-child(2),
.text-effect span:nth-child(5),
.text-effect span:nth-child(8){
   color: #ff0000;
}
@keyframes animate{
    0%, 50%, 100%{ transform: rotate(0deg) scale(1); }
    25%{ transform: rotate(4deg) scale(0.98); }
    75%{ transform: rotate(-4deg) scale(1.02); }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 100px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 479px){
    .text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 359px){
    .text-effect{ font-size: 45px; }
}
Yang harus di perhatikan dalam menggunakan CSS ini adalah penempatan warna font perhatikan pada bagian .text-effect span:nth-child(1),  dan .text-effect span:nth-child(4), itu artinya jarak warna yang akan diberikan 3 huruf.

Sama halnya juga pada baris .text-effect span:nth-child(5), dan .text-effect span:nth-child(8) akan memberikan jarak warna yang sama menjadi 3 huruf. Untuk warna huruf ke 3 itu sendiri berada di  .text-effect{ color: #ffff00;. Dan untuk jumlah huruf bisa kalain jumlahkan dengan rumus seperti diatas. Pada contoh kali ini menggunkan huruf L A B K O M 9 9. Untuk menulisakn huruf itu sendiri berada pada elemen HTML berikut ini :


<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="text-effect">
            <span>L</span><span>A</span><span>B</span><span>K</span>O<span>M</span><span>9</span><span>9</span>
        </div>
        <div class="text-effect">
            <span>B</span><span>E</span><span>L</span><span>A</span><span>J</span><span>A</span><span>R</span><span>H</span><span>T</span><span>M</span><span>L</span>
        </div>
    </div>
</div>
</div>


Font itu sendiri harus dituliskan tepat berada di bawah <div class="text-effect">. Karena fungsi inilah yang digunakan untuk membuat animasi efek pada tesk yang digunakan. Berikut ini DEMO dari kode diatas 





LABKOM99




Dan untuk kode HTML lengkapnya Membuat efek animasi tesk kartun dengan HTML CSS3 dan Google font dapat dilihat seperti di bawah ini :


<!DOCTYPE html>
<html lang="EN">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title> Labkom99.com - Membuat Efek Animasi Tesk Kartun Dengan HTML CSS3 Dan Google Font </title>
        <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch:700&display=swap" rel="stylesheet"> 
<style>
    .demo{ background: #222; }
    ..text-effect{
      color: #022635;
      font-family: 'Cabin Sketch', cursive;
      font-size: 100px;
      text-align: center;
      text-transform: uppercase;
      margin: 0 auto;
      position: relative;
    }
    .text-effect span{
      display: inline-block;
      animation: animate 0.5s linear infinite both;
    }
    .text-effect span:nth-child(1),
    .text-effect span:nth-child(4),
    .text-effect span:nth-child(7),
    .text-effect span:nth-child(10){
     color: #146d06;
    }
    .text-effect span:nth-child(2),
    .text-effect span:nth-child(5),
    .text-effect span:nth-child(8){
     color: #b7977b;
    }
    @keyframes animate{
    0%, 50%, 100%{ transform: rotate(0deg) scale(1); }
    25%{ transform: rotate(4deg) scale(0.98); }
    75%{ transform: rotate(-4deg) scale(1.02); }
    }
    @media only screen and (max-width: 990px){
    .text-effect{ font-size: 100px; }
    }
    @media only screen and (max-width: 767px){
    .text-effect{ font-size: 80px; }
    }
    @media only screen and (max-width: 479px){
    .text-effect{ font-size: 60px; }
    }
    @media only screen and (max-width: 359px){
    .text-effect{ font-size: 45px; }
    }
</style>
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-md-12">
      <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>
    </div>
</div>
</div>
</body>
</html>

Selamat mencoba ...!!!

Komentar