Tạo hiệu ứng logo động cực hấp dẫn với CSS3

Hôm nay mình tiếp tục mang đến cho các bạn một hiệu ứng động được làm từ CSS3, hiệu ứng này đơn giản thôi, nhưng chắc chắn một điều là các bạn sẽ có thể học và hiểu rất nhiều từ việc tạo những hiệu ứng động từ CSS3.

Xem Demo | Download

HTML

Trước hết, chúng ta sẽ cần khung chuẩn html như sau :

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

CSS

Sau đó chúng ta sẽ dùng đoạn css sau để tạo logo động :

body{
  background-color:#111;
}

.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("https://dl.dropboxusercontent.com/u/88633080/icon-android.png");
        height: 100px;
        awidth: 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);
    }
}

Thế là xong, các bạn đã có thể áp dụng vào các logo trên trang web hay blog của các bạn, cũng như tự sáng tạo thêm nhiều hiệu ứng động cho riêng mình.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster