Cara Membuat Efek Teks Animasi dengan CSS

sumber: pixabay.com

 

Selamat siang, tutorial kali ini akan membahas bagaimana cara membuat teks animasi pada CSS dengan mudah, sebelum membuat, pastikan anda sudah membuka aplikasi XAMPP pada laptop kalian, untuk membuatnya kali ini saya menggunakan aplikasi notepad++. Baik langsung saja ke langkah yang pertama.

1. Buka aplikasi notepad++/sublime text/adobe dreamweaver.

2. Buat file baru dengan cara klik ctrl+N, lalu beri nama index.html.

3. Buat file baru dengan cara yang sama, dan beri nama style.css.

4. Buat folder dengan nama  Cobateksanimasi.

5. Save kedua file tersebut dan simpan ke dalam folder.

6. Pada index.html, salin atau ketik ulang sintak berikut:

<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar Teks Animasi</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
<div class="container">
  <span class="text1">Selamat Datang</span>
  <span class="text2">Di Blog Saya</span>
</div>
  </body>
</html>

contoh gambar index.html:

 

7. Pindah ke style.css, masukkan sintak berikut:

*{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
body{
  background:#000;
}
.container{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.container span{
  text-transform: uppercase;
  display: block;
}
.text1{
  color: white;
  text-shadow: 1px 0px 4px green, 2px 0px 4px blue, 3px 0px 4px blue, 2px 0px 3px blue, 2px 3px 15px #d42c36, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #d42c36, 40px 0vw 200px #d42c36;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: text 3s 1;
}
.text2{
  font-size: 30px;
  color: white;
  text-shadow: 1px 0px 4px green, 2px 0px 4px blue, 3px 0px 4px blue, 2px 0px 3px blue, 2px 3px 15px #d42c36, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #d42c36, 40px 0vw 200px #d42c36;
}
@keyframes text {
  0%{
    color: black;
    margin-bottom: -40px;
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
    85%{
    letter-spacing: 9px;
    margin-bottom: -30px;
    }
      0%{
    color: black;
    margin-bottom: -40px;
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
    85%{
    letter-spacing: 9px;
    margin-bottom: -30px;
    }
    0%{
        box-shadow:0 0 0 0 rgba(0, 76, 60, 0.6),0 0 0 0 rgba(231, 76, 60, 0);
    }
    30%{
        box-shadow:0 0 0 50px rgba(0, 2, 60, 0),0 0 0 0 rgba(231, 76, 60, 0);
    }
    0%{
        box-shadow:0 0 0 50px rgba(0, 76, 60, 0),0 0 0 30px rgba(231, 76, 60, 0);
    }
    0%{
        box-shadow:0 0 0 0 rgba(0, 76, 60, 0.6),0 0 0 30px rgba(231, 76, 60, 0);
    }
  }

8. Hati-hatilah dalam penulisan sintak agar tidak terjadi kesalahan pada outputnya.

9. Untuk melihat output caranya adalah buka browser kalian, lalu ketik localhost/Cobateksanimasi/index.html. Maka hasilnya seperti video dibawah ini:

File download komen dibawah!

Jika ada pertanyaan lain, silahkan komentar dibawah ini, terimakasih.