Posted by Aak
Aak-share.com Updated at: 2:48:00 PM

Cara Membuat Logo Animasi Effect Rotasi di Blog

No comments:
Logo Animasi Sederhana di Blog ~ Logo pada setiap Blog memiliki keindahan dan keunikan tersendiri dengan berbagai desain yang bagus . Membuat logo bisa kita lakukan melalui fasilitas 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 menggunakan properti CSS yaitu rotateX(0deg) rotateY(0deg) .



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 menggunakan CTRL+F Anda cari kode ]]></b:skin>
4. Kemudian Anda salin kode 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 kode CSS dibagian atas silahkan Anda isikan dengan URL Gambar logo Anda.


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

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

Semoga bermanfaat!



Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments