Membuat Border Bergerak Di Sisi Gambar

Membuat Border Bergerak Di Sisi Gambar - Elemen yang akan kita gunakan dalam efek kali ini adalah animation-clipMe, sedangkan gerakan kita perintahkan dengan infinite-media untuk membuat border bergerak di sisi gambar seperti ini:




DEMO SHOW

BACA JUGA

Diary Notes Theme Sitemap Responsive



Jika berhubungan dengan animation effect, sudah pasti disana ada objek bergerak secara terus menerus tanpa ada perintah mouse-hover ataupun pointer-click. Gerakan ini disebut dengan keyframes-animation, seperti Animasi Teks Hitam Putih Dengan Marquee merupakan salah satu contoh bentuk keyframes-infinite untuk membuat teks bergerak tanpa batas. Kali ini gambar dalam posting yang akan kita buat border bergerak dengan perintah yang sama.

Penerapan Efek Ke Blog
Pada Halaman editor teks, pilih tab HTML (bukan yang COMPOSE) saat Anda akan membuat postingan terbaru, selanjutnya COPY semua kode dibawah ini, lalu PASTE dalam halaman. Kode lengkapnya seperti ini:

<style type="text/css">
.bb {
  width:200px;height:200px;margin:120px auto;
  /* ganti dengan URL-gambar anda */
  background:url("URL-Gambar Anda") no-repeat center center;
  border:2px solid aqua;color:#69ca62;cursor:pointer;
  box-shadow:inset 0 0 0 3px rgba(105, 202, 98, 0.5)}

.bb::before{animation-delay:-4s;-webkit-animation-delay:-4s;-moz-animation-delay:-4s}
.bb:hover::after,.bb:hover::before {color:yellow}
.bb,.bb::before,.bb::after {position:absolute;top:0;bottom:0;left:0;right:0}
.bb::before,.bb::after {
  content: '';z-index: -1;margin: -5%;box-shadow: inset 0 0 0 3px;
  animation: clipMe 8s linear infinite;
  -webkit-animation: clipMe 8s linear infinite;
  -moz-animation: clipMe 8s linear infinite}

@keyframes clipMe {
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}
25% {clip:rect(0px, 2px, 220.0px, 0px)}
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}

@-webkit-keyframes clipMe {
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}
25% {clip:rect(0px, 2px, 220.0px, 0px)}
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}

@-moz-keyframes clipMe {
0%, 100% {clip:rect(0px, 220.0px, 2px, 0px)}
25% {clip:rect(0px, 2px, 220.0px, 0px)}
50% {clip:rect(218.0px, 220.0px, 220.0px, 0px)}
75% {clip:rect(0px, 220.0px, 220.0px, 218.0px)}}
</style>
<div class="bb"></div>