thực hành - tạo hình ảnh rung lắc

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo một hình ảnh rung lắc liên tục khi người dùng di chuột bằng HTML và CSS.

Hình ảnh rung lắc

Di chuột vào hình ảnh để xem hiệu ứng

Xem kết quả

Cách tạo hình ảnh rung lắc

Bước 1) Thêm HTML:

Ví dụ

<!-- Tạo vùng chứa hình ảnh -->
<div class="containerx">
    <img src="/images/picture_5.jpg" alt="dog" />
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa hình ảnh */
.containerx {
    width:100%;
    height:auto;    
}
/* Tạo kiểu cho hình ảnh */
.containerx img {
    width:50%;
    height:auto;    
}
/* Thêm hiệu ứng rung lắc khi di chuột */
.containerx img:hover {
    animation:rung 0.5s;
    animation-iteration-count:infinite;    
}
/* Định nghĩa hiệu ứng rung lắc */
@keyframes rung {
    0 { transform:translate(1px,1px) rotate(0deg);}
    10% { transform:translate(-1px,-2px) rotate(-1deg);}
    20% { transform:translate(-3px,0px) rotate(1deg);}
    30% { transform:translate(3px,2px) rotate(0deg);}
    40% { transform:translate(1px,-1px) rotate(1deg);}
    50% { transform:translate(-1px,2px) rotate(-1deg);}
    60% { transform:translate(-3px,1px) rotate(0deg);}
    70% { transform:translate(3px,1px) rotate(-1deg);}
    80% { transform:translate(-3px,0px) rotate(1deg);}
    90% { transform:translate(1px,-2px) rotate(0deg);}
    100% { transform:translate(-3px,0px) rotate(-1deg);}    
}