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.
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;
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);
}
}
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.