Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog


Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog - Hallo sobat blogger, pada kesempatan ini saya akan membagikan tutorial untuk membuat efek bayangan berjalan bolak balik di logo blog. Untuk demonya sobat bisa langsung melihatnya pada logo blog ini.

Untuk cara memasangnya, sobat bisa menyalin CSS di bawah ini dan tempelkan sebelum kode ]]></b:skin>


/* Effect Logo */
header #header-inner a{position:relative}
header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}
header #header-inner a:before{left:-5%;animation:light-left 3s infinite alternate linear}
header #header-inner a:after{right:-5%;animation:light-right 3s infinite alternate linear}
@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}

Demikian artikel dari saya tentang Cara Membuat Efek Bayangan Bolak- Balik di Logo Blog, Semoga artikel diatas bermanfaat bagi sobat semua. Terima kasih dan selamat mencoba

0 Response to "Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close