Hi 😁 Rất vui được gặp lại các bạn, trong bài viết mới này mình sẽ hướng dẫn các bạn làm 2 ảnh động đẹp mắt nhé. Đó là hiệu ứng chặn sóng và hoạt hình con trỏ Để hiểu rõ hơn thì chúng ta sẽ xem một bản demo Nếu bạn đã xem demo mà muốn tìm hiểu về 2 hiệu ứng này thì chúng ta cùng bắt đầu ngay nào 😁 Nội dung tương tự Hiệu ứng gợn sóngĐầu tiên chúng ta sẽ làm hiệu ứng màn ảnh trước. Ta will create HTML as after
Add style for media play icon .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
}
Để căn giữa theo chiều dọc và ngang cho biểu tượng bên trong div media-play-icon chúng ta có nhiều cách nhưng mình chọn cách đơn giản nhất là .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 5 và .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 6. With line-height ta sẽ căn theo chiều dọcline-height được tính bằng khoảng cách trên và khoảng cách dưới của văn bản Mình lấy ví dụ Giả sử kích thước phông chữ của văn bản là 16px. line-height mình cho 60px như khoảng cách trên và dưới của văn bản là bằng nhau và bằng (60px-16px)/2 = 22px Quay trở lại bài trên, khi đặt .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 6 và với biểu tượng có cỡ chữ là 16px, ta sẽ có khoảng cách phía dưới của biểu tượng là (50px-16px)/2 = 17px => căn theo chiều dọc thành công 🎉Tiếp theo ta sẽ viết hoạt hình cho. media-play-icon. before and. media-play-icon. sau đó Mình sẽ chọn chiều dài và chiều rộng bằng div media-play-icon .media-play-icon::before,
.media-play-icon::after {
top: 0;
left: 0;
border-radius: 50%;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
👉 Tiếp theo, ta viết animation cho Ripple Effect @keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
}
50% {
box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
Giải thích hoạt hình gợn sóng 0%. Mình để box-shadow tất cả các thuộc tính là 0 và blur là màu trắng, opacity là 0. 6 50%. Tăng độ rộng (kích thước của bóng) lên thành 40px 100%. all features are 0 and blur is color white opacity is 0 Ta sẽ thêm hoạt ảnh vào. media-play-icon. before and. media-play-icon. sau 🎉 .media-play-icon::before,
.media-play-icon::after {
animation: ripple 3s infinite;
}
And more animation-delay ________số 8 Sau đây là kết quả thống kê Như vậy là chúng ta đã hoàn thành Ripple Effect 😁 Hoạt hình con trỏỞ hoạt hình này, chúng ta sẽ áp dụng Hiệu ứng Ripple cho chuột. Cụ thể khi chuột di chuyển qua nút ta sẽ kích hoạt Ripple Effect. 😁 Thuộc tính@keyframes43. 010. 016. 09. 030. 0animation-name43. 010. 016. 09. 030. 0animation-duration43. 010. 016. 09. 030. 0animation-delay43. 010. 016. 09. 030. 0animation-iteration-count43. 010. 016. 09. 030. 0animation-direction43. 010. 016. 09. 030. 0animation-timing-function43. 010. 016. 09. 030. 0animation-fill-mode43. 010. 016. 09. 030. 0animation43. 010. 016. 09. 030. 0
Ảnh động CSS là gì?Hoạt ảnh cho phép một phần tử thay đổi dần dần từ kiểu này sang kiểu khác Bạn có thể thay đổi bao nhiêu thuộc tính CSS tùy thích, bao nhiêu lần tùy thích Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số khung hình chính cho hoạt ảnh Các khung hình chính giữ các kiểu mà phần tử sẽ có vào những thời điểm nhất định
Quy tắc @keyframesKhi bạn chỉ định các kiểu CSS bên trong quy tắc @keyframes , hoạt ảnh sẽ dần dần thay đổi từ kiểu hiện tại sang kiểu mới vào những thời điểm nhất định Để hoạt ảnh hoạt động, bạn phải liên kết hoạt ảnh với một phần tử Ví dụ sau liên kết hoạt ảnh "ví dụ" với thành phần. Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần dần thay đổi màu nền của phần tử từ "đỏ" sang "vàng" Ví dụ/* Mã hoạt ảnh */ @keyframes ví dụ { từ {background-color. đỏ;} thành {background-color. màu vàng;} } /* Phần tử để áp dụng hoạt ảnh cho */ div { chiều rộng. 100px; chiều cao. 100px; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; } Tự mình thử »Ghi chú. Thuộc tính .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 0 xác định thời gian hoàn thành hoạt ảnh. Nếu thuộc tính .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 0 không được chỉ định, sẽ không có hoạt ảnh nào xảy ra vì giá trị mặc định là 0 giây (0 giây). Trong ví dụ trên, chúng tôi đã chỉ định thời điểm kiểu sẽ thay đổi bằng cách sử dụng từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)) Cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm bao nhiêu thay đổi kiểu tùy thích Ví dụ sau sẽ thay đổi màu nền của phần tử khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100% Ví dụ/* Mã hoạt ảnh */ @keyframes ví dụ { 0% {background-color. đỏ;} 25% {background-color. màu vàng;} 50% {background-color. xanh da trời;} 100% {background-color. màu xanh lục;} } /* Phần tử để áp dụng hoạt ảnh cho */ div { chiều rộng. 100px; chiều cao. 100px; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; } Tự mình thử »Ví dụ sau sẽ thay đổi cả màu nền và vị trí của phần tử khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100% Ví dụ/* Mã hoạt ảnh */ @keyframes ví dụ { 0% {background-color. màu đỏ; . 0px; . 0px;} 25% {background-color. màu vàng; . 200px; . 0px;} 50% {background-color. màu xanh da trời; . 200px; . 200px;} 75% {background-color. màu xanh lá; . 0px; . 200px;} 100% {background-color. màu đỏ; . 0px; . 0px;} } /* Phần tử để áp dụng hoạt ảnh cho */ div { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; } Tự mình thử »
Trì hoãn hoạt ảnhThuộc tính .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 2 chỉ định độ trễ khi bắt đầu hoạt ảnhVí dụ sau có độ trễ 2 giây trước khi bắt đầu hoạt ảnh Ví dụdiv { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; độ trễ hình ảnh động. 2 giây; } Tự mình thử »Giá trị âm cũng được cho phép. Nếu sử dụng các giá trị âm, hoạt ảnh sẽ bắt đầu như thể nó đã được phát trong N giây Trong ví dụ sau, hoạt ảnh sẽ bắt đầu như thể nó đã phát được 2 giây Ví dụdiv { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; độ trễ hình ảnh động. -2s; } Tự mình thử »
Đặt số lần hoạt ảnh sẽ chạyThuộc tính .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 3 chỉ định số lần hoạt ảnh sẽ chạyVí dụ sau sẽ chạy hoạt ảnh 3 lần trước khi dừng Ví dụdiv { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt ảnh. ví dụ; thời lượng hoạt ảnh. 4s; animation-iteration-count. 3; } Tự mình thử »Ví dụ sau sử dụng giá trị "infinite" để làm cho hoạt ảnh tiếp tục mãi mãi Ví dụdiv { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; hoạt ảnh-lặp-đếm. vô hạn; } Tự mình thử »
Chạy hoạt hình theo hướng ngược lại hoặc chu kỳ thay thếThuộc tính .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 4 chỉ định xem hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ thay thếThuộc tính animation-direction có thể có các giá trị sau @keyframes 6 - Hoạt hình được phát như bình thường (chuyển tiếp). Đây là mặc định@keyframes 7 - Hoạt hình được phát theo hướng ngược lại (ngược lại)@keyframes 8- Hoạt hình được phát tới trước, sau đó phát ngược lại@keyframes 9 - Hoạt hình được phát ngược trước, sau đó phát tiếp
Ví dụ sau sẽ chạy hoạt hình theo hướng ngược lại (ngược) Ví dụdiv { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; hướng hoạt ảnh. đảo ngược; } Tự mình thử »Ví dụ sau sử dụng giá trị "alternate" để làm cho hoạt ảnh chạy về phía trước, sau đó chạy ngược lại Ví dụdiv { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; animation-iteration-count. 2; hướng hoạt ảnh. thay thế; } Tự mình thử »Ví dụ sau sử dụng giá trị "alternate-reverse" để làm cho hoạt ảnh chạy ngược trước, sau đó chuyển tiếp Ví dụdiv { chiều rộng. 100px; chiều cao. 100px; vị trí. tương đối; màu nền. màu đỏ; tên hoạt hình. ví dụ; thời lượng hoạt ảnh. 4s; animation-iteration-count. 2; hướng hoạt ảnh. luân phiên đảo ngược; } Tự mình thử »
Chỉ định Đường cong Tốc độ của Hoạt ảnhThuộc tính .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 9 chỉ định đường cong tốc độ của hình ảnh độngThuộc tính animation-timing-function có thể có các giá trị sau .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 01 - Chỉ định hoạt ảnh bắt đầu chậm, sau đó nhanh, rồi kết thúc chậm (đây là mặc định).media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 02 - Chỉ định hoạt ảnh có cùng tốc độ từ đầu đến cuối.media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 03 - Chỉ định hoạt ảnh bắt đầu chậm.media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 04 - Chỉ định hoạt ảnh có kết thúc chậm.media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 05 - Chỉ định hoạt ảnh bắt đầu và kết thúc chậm.media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 06 - Cho phép bạn xác định các giá trị của riêng mình trong một hàm bậc ba
Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng Ví dụ#div1 {animation-timing-function. tuyến tính;} #div2 {animation-timing-function. dễ dàng;} #div3 {animation-timing-function. dễ sử dụng;} #div4 {animation-timing-function. dễ dàng thoát ra;} #div5 {animation-timing-function. dễ dàng vào ra;} Tự mình thử »
Chỉ định chế độ lấp đầy cho một hình ảnh độngHoạt ảnh CSS không ảnh hưởng đến một phần tử trước khi khung hình chính đầu tiên được phát hoặc sau khi khung hình chính cuối cùng được phát. Thuộc tính animation-fill-mode có thể ghi đè hành vi này Thuộc tính .media-play-icon {
width: 50px;
height: 50px;
background-color: #dc3545;
border-radius: 50%;
position: relative;
line-height: 50px;
text-align: center;
cursor: pointer;
} 6 chỉ định kiểu cho phần tử đích khi hoạt ảnh không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai) |