Membuat Blur Loading Text Animation Menggunakan HTML & CSS
Membuat Blur Loading Text Animation Menggunakan HTML & CSS – Pada artikel kali ini kita akan membuat blur loading text animation menggunakan html dan css. Pada tutorial kali ini kita akan menggunakan dua buah file yaitu satu file html dan satu file css. Simak artikel ini lebih lanjut untuk mengetahui cara membuat blur loading text animation menggunakan html dan css.
Daftar Isi
Kode file CSS
@import url(https://fonts.googleapis.com/css?family=Koulen); *{ margin: 0; padding: 0; box-sizing: inherit; } body { width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; } .loading-text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; text-align: center; width: 100%; height: 100%; line-height: 100px; } .loading-text span { display: inline-block; margin: 0 5px; color: #fff; font-size: 2.5em; font-family: "Koulen", sans-serif; } .loading-text span:nth-child(1) { filter: blur(0px); -webkit-animation: blur-text 1.5s 0s infinite linear alternate; animation: blur-text 1.5s 0s infinite linear alternate; } .loading-text span:nth-child(2) { filter: blur(0px); -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate; animation: blur-text 1.5s 0.2s infinite linear alternate; } .loading-text span:nth-child(3) { filter: blur(0px); -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate; animation: blur-text 1.5s 0.4s infinite linear alternate; } .loading-text span:nth-child(4) { filter: blur(0px); -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate; animation: blur-text 1.5s 0.6s infinite linear alternate; } .loading-text span:nth-child(5) { filter: blur(0px); -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate; animation: blur-text 1.5s 0.8s infinite linear alternate; } .loading-text span:nth-child(6) { filter: blur(0px); -webkit-animation: blur-text 1.5s 1s infinite linear alternate; animation: blur-text 1.5s 1s infinite linear alternate; } .loading-text span:nth-child(7) { filter: blur(0px); -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate; animation: blur-text 1.5s 1.2s infinite linear alternate; } @keyframes blur-text { 0% { filter: blur(0px); } 100% { filter: blur(4px); } } @-webkit-keyframes blur-text { 0% { filter: blur(0px); } 100% { filter: blur(4px); } }
Kode File HTML
<!DOCTYPE html> <html> <head> <TITLE>Blur Loading Animation</TITLE> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="loading"> <div class="loading-text"> <span class="loading-text-words">L</span> <span class="loading-text-words">O</span> <span class="loading-text-words">A</span> <span class="loading-text-words">D</span> <span class="loading-text-words">I</span> <span class="loading-text-words">N</span> <span class="loading-text-words">G</span> </div> </div> </body> </html>
Hasil keluaran yang dihasilkan
Temukan source code HTML dan CSS menarik lainnya hanya di Inpows.
Baca Juga
Konfigurasi Typescript dengan Babel, Mocha dan Webpack
Membuat Icon Pulse Animation Menggunakan HTML dan CSS
Membuat Algoritma Insertion Sort di Kotlin