Membuat Border Bergerak Di Sisi Gambar

Berikut ini akan diuraikan langkah-langkah cara membuat ( Border Bergerak Di Sisi Gambar ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Border Bergerak Di Sisi Gambar ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

HTML Kode

<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>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Border Bergerak Di Sisi Gambar ) semoga bermanfaat terima kasih.