Cara Menciptakan Logo Animasi Effect Rotasi Di Blog

Logo Animasi Sederhana di Blog Logo pada setiap Blog mempunyai keindahan dan keunikan tersendiri dengan banyak sekali desain yang manis . Membuat logo dapat kita lakukan melalui akomodasi web atau situs penyedia pembuatan logo secara gratis dengan hasil yang baik sesuai apa yang anda harapkan.

Pada logo animasi berikut ini terlihat sederhana namun tersimpan sebuah keindahan dengan menampilkan effect rotasi pada image atau gambar , pada prinsipnya untuk menciptakannya dengan memakai properti CSS ialah rotateX(0deg) rotateY(0deg) .

Demo   CODE

Anda ingin terlihat Logo pada Blog Anda terlihat menarik? berikut ini cara pemasangannya :

1. Login keakun Blogger
2. Pilih Template > klik Edit HTML
3. Dengan memakai CTRL+F Anda cari kode ]]></b:skin>
4. Kemudian Anda salin instruksi dibawah ini dan pasangkan diatasnya atau sebelumnya .

.mrloader .inner-loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-perspective: 100px;
        perspective: 100px;
    }

    .mrloader .inner-text {
        top: 50%;
    }

    .mrloader .side {
        background: url("URL Gambar Logo");
        height: 100px;
        width: 100px;
        background-size: cover;
        -webkit-animation: rotate-side 3s infinite ease-in-out;
        animation: rotate-side 3s infinite ease-in-out;
    }

@-webkit-keyframes rotate-side {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
    }

    40% {
        -webkit-transform: rotateX(735deg) rotateY(0deg);
    }

    47%,50% {
        -webkit-transform: rotateX(720deg) rotateY(0deg);
    }

    90% {
        -webkit-transform: rotateX(720deg) rotateY(735deg);
    }

    97%,100% {
        -webkit-transform: rotateX(720deg) rotateY(720deg);
    }
}

@keyframes rotate-side {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    40% {
        transform: rotateX(735deg) rotateY(0deg);
    }

    47%,50% {
        transform: rotateX(720deg) rotateY(0deg);
    }

    90% {
        transform: rotateX(720deg) rotateY(735deg);
    }

    97%,100% {
        transform: rotateX(720deg) rotateY(720deg);
    }
}

Pada instruksi CSS dibagian atas silahkan Anda isikan dengan URL Gambar logo Anda.

5. Simpan Template
6. Selanjutnya Anda salin instruksi dibawah ini, dan Anda dapat menempatkannya sesuai yang Anda kehendaki .

<div class="mrloader">
  <div class="inner-loader">
    <div class="side">
</div>
</div>
</div>

Semoga bermanfaat!




Sumber http://www.websiteedukasi.com/