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

Membuat blur loading text animation - inpows — Membuat blur loading text animation – inpows

Temukan source code HTML dan CSS menarik lainnya hanya di Inpows.

Membuat Icon Pulse Animation Menggunakan HTML dan CSS

Membuat Algoritma Insertion Sort di Kotlin

Membuat Algoritma Bubble Sort di Kotlin

Membuat Algoritma Binary Search Menggunakan Kotlin