Membuat Animasi Border dengan CSS3

Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga baik yah, amin.

Pada kesempatan kali ini saya akan berbagi tutorial mengenai bagaimana caranyaÂ Membuat Animasi Border Dengan CSS3, animasi ini bisa kita gunakan untuk hiasan bingkai sebuah gambar ataupun yang lain nya, bagaimana cara membuat nya ? simak langkah-lagkah nya berikut ini.

1. Silahkan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut.

<div id="animation-examples">
  <div class="animation-examples one">Dumetschool</div>
  <br />
  <br />
  <div class="animation-examples two">Dumetschool</div>
  <br />
  <br />
  <div class="animation-examples three">Dumetschool</div>
</div>

2. Kalo sudah, ketikan kembali kode CSS3 berikut ini.

.animation-examples {
  width: 600px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: cambria;
}

.animation-examples.one {
  color: #69D2E7;
  outline: 10px dashed #E0E4CC;
  box-shadow: 0 0 0 10px #69D2E7;
  animation: 1s animateBorderOne ease infinite;
}

@keyframes animateBorderOne {
  to {
    outline-color: #69D2E7;
    box-shadow: 0 0 0 10px #E0E4CC;
  }
}

.animation-examples.two {
  color: #FA2A00;
  outline: 10px dashed #F2D694;
  box-shadow: 0 0 0 10px #FA2A00;
  animation: 2s animateBorderTwo ease infinite;
}

@keyframes animateBorderTwo {
  to {
    outline-color: #FA2A00;
    box-shadow: 0 0 0 10px #F2D694;
  }
}

.animation-examples.three {
  color: #BEF202;
  background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);
  background-size: auto 2px;
  outline: 10px dashed #BEF202;
  box-shadow: 0 0 0 10px #1B676B;
  animation: 1s animateBorderThree ease infinite;
}

@keyframes animateBorderThree {
  to {
    outline-color: #1B676B;
    box-shadow: 0 0 0 10px #BEF202;
  }
}

#animation-examples{
  margin: 20px 10px;
}

3. Setelah itu disimpan, kemudian jalankan dibrowser masing-masing dan lihat hasilnya, Selesai.

Menarik bukan untuk dijadikan sebuah hiasan bingkai ? baik sampai disini artikel mengenaiÂ bagaimana caranyaÂ Membuat Animasi Border Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba.

DEMO

Kategori