Header berputar 360 Derajat dan Menghilang



          Hai hai  hai... masih ngikutin tutorial saya ,,, kali ini kita akan membuat efek blog berputar 360 derajat ... Maksudnya Gimana tuh ??? ,, maksudnya, ketik a kursor menuju ke arah Header dan masuk ke area header, maka seketika itu header blog akan berputar 360 derajat dan menghilang... waow... hebat yaa yang bikin skrip nya..


Ini dia Tutorialnya.
Pertama kita akan memberikan efek header berputar 360 derajat saja tanpa menghilang , 
1. Dashboard
2. Template
3. HTML
4. Ctrl+F dan temukan kode berikut 

h1.title {
5.  COpy kode berikut ini dan paste kan di atas kode yang pertama.

    #header:hover{
    -webkit-transition-duration: 3s;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    }
6. Preview dan Simpan Template


Kedua, kita akan membuat efek Header Berputar dan langsung menghilang, ikuti cara  no. 1 sampai no. 6 ... pada langkah yang kelima, ganti kodenya dengan kode berikut ini :
    .header:hover {
    padding-left:160px;
    -webkit-transition: 2s;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    opacity:.01;
    }

Pilih salah satu saja yaa... selamat mencoba..

No comments:

Post a Comment