Đôi Chút Về Tác Giả

NGUYỄN ĐỨC HUY

Không phải ai cũng là tương lai của bạn. Một vài người chỉ lướt qua cuộc đời bạn để mang lại cho bạn một số bài học của cuộc sống.

Thích Bình Luận Chia Sẻ

BLOG CHUYÊN CHIA SẺ THỦ THUẬT & ẢNH BÌA FACEBOOK

Tạo Hiệu Ứng Hoán Đổi Hình Ảnh Bằng CSS

Tạo Hiệu Ứng Hoán Đổi Hình Ảnh Bằng CSS

Hello anh em, sau bao nhiêu ngày thì cuối cùng cũng đã hết Tết :v ăn lo ngủ nghỉ ở nhà cũng chán vll ra. Hôm nay rảnh rỗi sinh nông nổi ra b...
21 Bình Luận 15:30
Hello anh em, sau bao nhiêu ngày thì cuối cùng cũng đã hết Tết :v ăn lo ngủ nghỉ ở nhà cũng chán vll ra. Hôm nay rảnh rỗi sinh nông nổi ra bài mới ngay và luôn :v
Chúng ta vào vấn đề chính luôn :v Let's go baby:

Demo

Các Bước Thực Hiện

Bước 1: Đăng nhập vào blog
Bước 2: Các bạn có thể vào bố cục và HTML/Javascript và chèn code sau vào (hoặc là bạn có thể chèn đoạn code vào chỉnh sửa HTML cũng được nhé).

<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 alt="" class="imagebt1" src="Link Hình 1" />
  <img alt="" class="imagebt2" src="Link Hình 2" />
</div>
Phần tô xanh là chỉnh sửa kích thước của hình ảnh.
Phần tô đỏ là link hình ảnh nhé.
Chỉ với 2 bước đơn giản thôi là đã xong rồi. Chúc các bạn thành công!
Code: Chiase78.blogspot.com
Tạo Hiệu Ứng Hoán Đổi Hình Ảnh Bằng CSS Tạo Hiệu Ứng Hoán Đổi Hình Ảnh Bằng CSSĐức Huy Blog8.8stars based on9reviewsHello anh em, sau bao nhiêu ngày thì cuối cùng cũng đã hết Tết :v ăn lo ngủ nghỉ ở nhà cũng chán vll ra. Hôm nay rảnh rỗi sinh nông nổi ra b...

Cùng Tham Gia Bình Luận Nhé

21 nhận xét:

  1. Hay lắm em đơn giản nhưng rất là hữu ích <3

    Trả lờiXóa
  2. Đây rồi :v đang cần nè homie :v

    Trả lờiXóa
  3. Blog e dạo này có cái dafung gì đó gây lag lúc vào, load lâu lắm :3

    Trả lờiXóa
    Trả lời
    1. À k, cái data.fandung gì đó

      Xóa
    2. à có dùng á a. để e xoá nó cái

      Xóa
  4. tương tác <3
    à mà Demo ông cho cái link ảnh khác chứ 2 link ảnh kia die rồi khó hình dung :v

    Trả lờiXóa
  5. Trả lời
    1. lâu rồi mới thấy Hải ghé blog chơi :v

      Xóa
    2. ẩn lâu quá rồi giờ xuất hiện thôi haha

      Xóa
    3. như một nhẫn giả :v

      Xóa
  6. 1 ngày vui vẻ nha Huy :v. Qua blog tui rep comment kìa.

    Trả lờiXóa
  7. Unlock 5s - 1 ngày cho all dạng FAQ APPS nè
    https://www.thanhphongit.tk/2018/03/tut-unlock-apps-5s-1-ngay-bao-ve.html

    Trả lờiXóa
  8. Liên kết với nhau ko bác

    Trả lờiXóa
    Trả lời
    1. Bạn vui lòng đặt cho mình trc nhé.

      Xóa

- Không spam bừa bãi, thô tục
- Tích chọn "Thông báo cho tôi" để nhận phản hồi từ tác giả qua mail.