For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat animasi header blog bergerak

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.