Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai cara membuat animasi header bergerak dan bisa diterapkan disemua template asalkan tau caranya
Info: Oke sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Animasi Header
Mengapa disebut sebagai animasi header? Karena animasi tersebut akan tampil pada background header di blog, sedangkan tampilan animasi tersebut seperti Block yang bergerak kearah dua arah berlawanan dan kembali dari arah berlawanan
Contoh Animasi
Contoh Animasi Header di blog tersebut bisa kamu lihat seperti animasi header blog yang sudah admin terapkan didalam blog Icloudice.com, dan hal tersebut bisa juga diterapkan didalam blog kamu asalkan kamu tau caranya, atau kamu bisa menggunakan tombol dibawah ini untuk bisa melihatnya
Info: Bagaimana sobat icloudZer dengan contoh tampilannya
Dibuat menggunakan CSS
Animasi Header blog tersebut dibuat hanya dengan menggunakan kode CSS saja tanpa tambahan kode HTML sebagai kode khusus untuk menampilkan tampilan
Penyamaan class
Jika ketika kamu menerapkan Animasi Header blog tersebut terkendala alias tidak tampil maka kamu harus menyamakan setiap class atupun id CSS dengan class ataupun id HTMLnya, jika beda kau harus menyamakan setiap class CSS ataupun class HTML agar animasi header Blog nya bisa tampil
Cara penerapan
Baiklah saatnya admin bakalan menjabarkan menenai cara membuat animasi header blog bergerak yang hanya dibuat dengan menggunakan kode CSS saja
Kode CSS
Kamu bisa langsung menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]>b:skin>
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:rahLight-left 3s infinite alternate linear}
header #header-inner a:after{right:-5%;animation:rahLight-right 3s infinite alternate linear}
@keyframes rahLight-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes rahLight-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}
}Info: Atau juga kamu bisa menggunakan tag <style> untuk meletakkan kode CSS diatas