Cara Buat efek rotasi 360 derajat di Blogspot

Kali ini agak sedikit berbeda dari biasanya, saya ingin memperkenalkan efek rotasi 360 derajat untuk Blogspot.

(ketika pembaca mengunjungi atau menyegarkan halaman, efek ini akan muncul). Gerakan tersebut dapat membuat pengunjung Blog / Website Anda lebih tertarik dan tidak membosankan. Selain itu, efek rotasi 360 derajat yang saya buat langsung pada artikel ini . Jika Anda perhatikan, Anda akan segera melihat, jika Anda tidak percaya Anda menekan F5 untuk segera tahu. 

☼ Sekarang mulai wizard dengan Ngoodee.

Opsi 1: Instal langsung di Template : Buka Blog =>Template=> Edit HTML. Tekan Ctrl + F dan arahkan ketag </ b: skin >. Kemudian paste kode berikut di atas tag </ b: skin> dan Simpan template.

@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes roll { 100% { -o-transform: rotate(360deg); } } @-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } } body{ -moz-animation-name: roll; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 2s; -o-animation-iteration-count: 2; -webkit-animation-name: roll; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; }

Opsi 2: Penginstalan khusus: Anda juga dapat menerapkannya ke satu posting dengan menempelkan kode di bawah ini di bagian HTML artikel (Atau menempelkannya di widge tHTML / JavaScript Anda)

<style> @-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes roll { 100% { -o-transform: rotate(360deg); } } @-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } } body{ -moz-animation-name: roll; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 2s; -o-animation-iteration-count: 2; -webkit-animation-name: roll; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } </style>

Catatan: Karena kodenya adalah CSS3, pada beberapa browser seperti IE5, 6, 7 tidak akan berfungsi. Bekerja dengan baik pada chroome, cococ, firefox, sarafi, IE9-10, .... Efek ini sama sekali tidak mempengaruhi kecepatan memuat halaman, jadi yakinlah!

☼ Dapat disesuaikan

360deg ini adalah rotasi halaman di sini adalah 360 0 . Perhatikan mengedit semua 3 paragraf karena sesuai dengan browser yang berbeda.

2s adalah waktu untuk memutar 360deg (Waktu untuk melakukan siklus penuh). Tip, jika sudutnya lebih besar, waktunya harus lebih lama.

Jika Anda menyukai artikel ini, silakan follow Blog Saya untuk secara teratur memperbarui artikel terbaik dan terbaru melalui email. Terima kasih. selamat mencoba. semoga bermanfaat...

Artikel Terkait