8/14/13

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

- Đố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
itviet360 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é.
Sử dụng CSS Keyframes hoán đổi hình ả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/AVvXsEis8EDUfvoR2zoeDVa7fDhVhpfG94MSvMktfoQI6DwzE19Pv66VhupWcmluqIObPVY726udyTtEfShcrp0r4JpvTd6IgRrp9jnEKH_zi_3R8FH3s9cB_V-p4GHsJX384lW41wlr8Jxh-fs/s1600/image1bt.jpg" alt="">
<img class="imagebt2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19QIDAlLt0StbjeycY8zUw0vU0rr_89QnXJdsUbZtjKnMnbcPHVkMmStj5P3-LDhUYvy3cZIU8Xfw4rstvwXc9LAav3IR9bD3ToIZzg5f1UvA9hqvVff3T3D-det_IgXhuCAn_eauPAE/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é :)

0 nhận xét:

Post a Comment