Còn anh em nào chưa xem End Game không ? Comment ngay bên dưới để nhận link nghen !
Cơn bão End Game chưa qua , blog của mình cũng đang hứng chịu những hậu quả nặng nề từ nó :)).
Hôm nay mình chia sẻ tới các bạn code tạo hiệu ứng tan biến mô phỏng cú búng tay của Thanos .
Không dài dòng nữa , triển ngay nào anh em. Hover vào ảnh để xem hiệu ứng
HTML
|
1 2 3 4 |
<div class="tpk-hover-thanos"> <img src="https://theprokey.com/wp-content/uploads/2019/05/demo-hieu-ung-thanos.jpg" alt=""> <img src="https://theprokey.com/wp-content/uploads/2019/05/tanbien.png" class="effect_thanos" alt=""> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.tpk-hover-thanos{ position: relative; width: 500px; height: 300px; overflow:hidden; } .tpk-hover-thanos img:nth-child(1){ position: absolute; width: 100%; height:100%; left:0; top:0; transform-origin: left; transition: 1s; } .tpk-hover-thanos:hover img:nth-child(1){ transition: 4s; transition-delay: 1s; transform: translateX(50px); opacity:0; filter: blur(20px); } .tpk-hover-thanos img.effect_thanos{ position: absolute; width: 1200px; height: 450px; transform: translateX(500px) scaleX(0); transform-origin: left; max-width: unset } .tpk-hover-thanos:hover img.effect_thanos{ transition: 8s; transform: translateX(-500px) scaleX(1); } |
Thế là xong
Việc còn lại của bạn là nên làm gì với hiệu ứng tan biến này, sử dụng nó hợp lý ra sao . Chúc các bạn thành công !
Nếu bạn thích bài viết này, hãy subscribe blog của mình để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé.Cảm ơn rất nhiều. 🙂
