Sử dụng CSS Keyframes hoán đổi hình ảnh

28 tháng 12, 2013

- Đối với hình ảnh thì có nhiều cách để show. Làm cho hình ảnh thể hiện 1 cách sống động và hợp lý hơn cũng là 1 điều cần thiết để hình ảnh đó được chú ý hơn.

Thủ thuật Blogspot hôm nay đưa ra 1 dạng Code CSS Keyframes để sử dụng hoán đổi hình ảnh khá đẹp mắt.

Các bạn có thể xem Demo: TẠI ĐÂY

Thế Giới Blog chia sẻ code và hướng dẫn cách làm trên Blogspot. Trên những nền Website khác thì các bạn làm tương tự nhé.

CODE:


<style>
.btcontainer {
position: relative;margin: 30px;height: 250px;width: 550px;float: left;}
/*Photo Border*/
.imagebt1, .imagebt2 {
border: 5px solid #fff;border-radius: 3px;height: 200px;margin: 20px;position: absolute;width: 300px;
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
.imagebt1 {
-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);}
.imagebt2 {
left: 100px;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);}
/*HOVERS*/
.btcontainer:hover {
cursor: pointer;}
.btcontainer:hover .imagebt1 {
-webkit-animation: imagebt1 1.5s 2 alternate;-moz-animation: imagebt1 1.5s 2 alternate;-ms-animation: imagebt1 1.5s 2 alternate;-o-animation: imagebt1 1.5s 2 alternate;animation: imagebt1 1.5s 2 alternate;
}
.btcontainer:hover .imagebt2 {
-webkit-animation: imagebt2 1.5s 2 alternate;
-moz-animation: imagebt2 1.5s 2 alternate;
-ms-animation: imagebt2 1.5s 2 alternate;
-o-animation: imagebt2 1.5s 2 alternate;
animation: imagebt2 1.5s 2 alternate;}
@keyframes "imagebt1" {
0% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-webkit-transform: rotate(-14deg);-moz-transform: rotate(-14deg);-o-transform: rotate(-14deg);-ms-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}}
@-moz-keyframes imagebt1 {
0% {
-moz-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {
-moz-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {
-moz-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-webkit-keyframes "imagebt1" {
0% {
-webkit-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {
-webkit-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {
-webkit-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-ms-keyframes "imagebt1" {
0% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-ms-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-ms-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@-o-keyframes "imagebt1" {
0% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
}
50% {-o-transform: rotate(-14deg);transform: rotate(-14deg);
}
100% {-o-transform: rotate(-7deg);transform: rotate(-7deg);
}
}
@keyframes "imagebt2" {
0% {
left: 100px;z-index: 1;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}
50% {
left: 350px;z-index: -3;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}
100% {
left: 100px;z-index: -3;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-moz-keyframes imagebt2 {
0% {left: 100px;z-index: 1;-moz-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-moz-transform: rotate(20deg);transform: rotate(20deg);
}
50% {
left: 350px;z-index: -3;-moz-transform: rotate(20deg);transform: rotate(20deg);
}
100% {
left: 100px;z-index: -3;-moz-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-webkit-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-webkit-transform: rotate(7deg);transform: rotate(7deg);
}
49% {
left: 350px;z-index: 1;-webkit-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-webkit-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-webkit-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-ms-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-ms-transform: rotate(7deg);transform: rotate(7deg);
}
49% {left: 350px;z-index: 1;-ms-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-ms-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-ms-transform: rotate(7deg);transform: rotate(7deg);
}
}
@-o-keyframes "imagebt2" {
0% {left: 100px;z-index: 1;-o-transform: rotate(7deg);transform: rotate(7deg);
}
49% {left: 350px;z-index: 1;-o-transform: rotate(20deg);transform: rotate(20deg);
}
50% {left: 350px;z-index: -3;-o-transform: rotate(20deg);transform: rotate(20deg);
}
100% {left: 100px;z-index: -3;-o-transform: rotate(7deg);transform: rotate(7deg);
}
}
</style>

<div class="btcontainer">
<img class="imagebt1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrycjNpA9GDZkqgMl2h2hSpT7q8pRm9-M71Xx2XymSX5rG899vrpfnoYJIHjscec415sdjMvRs1BCh10R9NCJ8AX3qxvE-BnbIwsEnZJW_reNNjSiGUR3FFwuJ819KSs0t6R1Hgyc_2E/s1600/image1bt.jpg" alt="">
<img class="imagebt2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-Mo7kdthm8bzAC5mBAdcKdOq2uHCuvwcS5WZOJFCqokwI5_SN5ecJie1uD2qJq45e_WSMN_gCEMB5xHb2P3Za1qjxLIYu7WIzNEKVUSqMH0JIXy-LNbZtfczGm4gFDXAIHnISahB2ro/s1600/image2bt.jpg" alt="">
</div>

CÁCH LÀM TRÊN bLOGSPOT

1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán Code trên vào tiện ích vừa thêm
3. Lưu lại và xem kết quả nhé :)