HTML
Mình dùng thẻ div
cho mỗi nhãn dán, class sticker
cho định dạng chung, sticker-#
cho mỗi hình ảnh (nếu không muốn, bạn có thể gắn hình ảnh bằng thuộc tính style="background-image: url(...);"
) và sticker-animate
là nhãn dán chuyển động còn sticker-static
là nhãn dán tĩnh.
<div class="sticker sticker-1 sticker-animate"></div> <div class="sticker sticker-2 sticker-animate"></div> <div class="sticker sticker-3 sticker-static"></div> <div class="sticker sticker-4 sticker-static"></div>
CSS
Đây là phần quan trọng nhất, chúng ta sử dụng thuộc tính background-image
cho nhãn dán. Lưu ý dùng class sticker-#
cho mỗi hình ảnh khai báo.
.sticker { cursor: pointer; height: 120px; width: 120px; image-rendering: -webkit-optimize-contrast; background-size: 432px 288px; background-position: -12px -12px; } .sticker-static { background-size: 120px 120px !important; background-position: 0 0 !important; } .sticker-animate { -webkit-animation-name: stickerAnimation; -webkit-animation-duration: 0.9s; -webkit-animation-timing-function: step-start; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: both; } @-webkit-keyframes stickerAnimation { 0% { background-position: -12px -12px; } 25% { background-position: -156px -12px; } 50% { background-position: -300px -12px; } 75% { background-position: -156px -156px; } 100% { background-position: -12px -156px; } } .sticker-1 { background-image: url(sticker.png); } .sticker-2 { background-image: url(sticker-2.png); } .sticker-3 { background-image: url(sticker-static.png); } .sticker-4 { background-image: url(sticker-static-2.png); }
Ta được kết quả.
Chúc các bạn thành công!