Cara Memberi Efek Bayangan Logo Animasi Bergerak Di Blog

Membuat efek shadow slash di header - Efek animasi bergerak di logo ini di sebut efek shadows slash yang bergerak seiringan sesuai dengan logo blog/website anda, sehingga bayangan berputar-putar dari titik pusatnya. efek ini sangat cocok di terapkan di logo maupun header tulisan agar terlihat lebih keren di mata pengunjung.

Bagi anda yang menyukai desain web/blog tidak asing lagi dengan efek css animasi bukan ? efek animasi di css sangat banyak yang bisa anda gunakan, salah satunya transform memiliki 2 jenis lagi yaitu translateY dan translateX dan masih banyak lainnnya. berikut tutorial membuat dan memasang efek shadows slash.

Cara Membuat Efek Shadow/Bayang Slash Di Blog

1. Login ke blogger > Tema > Edit HTML.
2. Cari kode ]]></b:skin> atau </style>, setelah ketemu kodenya. copy paster script css di bawah ini di atas ]]></b:skin> atau </style>.

Copy Paste !
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}}

3. Simpan dan selesai.

Pemberitahuan! Jika animasi bayangan tidak muncul, ganti #header-inner a dengan kode logo sesuai dengan theme anda. bisa mengeceknya dengan klik kanan mouse dan inspect Elements.

Demikianlah, membuat efek shadow slash di header blogger. semoga artikel ini bisa bermanfaat untuk anda.

Berbagi :