Cara Terbaru Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah

Demo    Mei 15, 2020    Blogger , CSS    5 comments   

Lapakinfo.net - Pada kesempatan ini saya mau berbagi tutorial tentang membuat efek bayangan yang berjalan bolak - balik di logo header blog kalian dengan mudah, Cara ini sangat gampang untuk kalian lakukan karena pada tutorial ini kalian cukup menambahkan CSS ke dalam template kalian dan langsung jadi. Efek bayangan ini yang nantinya akan berjalan bolak - balik di logo header blog saja, jadi efeknya tidak akan bertaburan kemana - mana.

Mungkin tidak sedikit dari kalian yang masih belum tahu tentang Cara Terbaru Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah, cara ini sebenarnya ialah cara lama tapi karena sekarang sudah banyak di pergunakan lagi maka saya sendiri langsung membuatkan tutorialnya buat kalian. Nah jika kalian mau membuat efek bayangan yang bisa berjalan bolak- balik di logo header blog kalian bisa ikuti tutorialnya di bawah ini.

Cara Terbaru Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah

1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Salin kode di bawah ini dan letakan tepat di atas kode  ]]></b:skin>.

/* Header Logo Effect Blog Lapakinfo.net */
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}}

4. Simpan template kalian dan selesai.

Jika CSS tersebut tidak berfungsi pada template kalian, silahkan ganti pemanggilnya #header-inner a dengan kode pemanggil pada template kalian.

• Demo

bagaimana sangat mudah sekali bukan untuk tutorial tentang Cara Terbaru Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini. Terimakasih sudah berkunjung dan semoga tutorial ini bermanfaat buat kalian semua.