Giải bài tập về transition với background image gradient trong CSS - Hiệu ứng Ripple effect

Hoai_Thu1 · June 16, 2019, 5:13pm

Mình đang tự học CSS, mình có đọc được một bài có hiệu ứng rất hay mà đọc code chưa hiểu rõ.
Làm ơn giúp với, mình ngồi cả ngày mà vẫn chưa hiểu ra.
Mình vẫn chưa hiểu sao nó lại ra hiệu ứng vòng tròn lan tỏa như vậy.
Mình có biết được là gradient chưa được hỗ trợ transition. Nên mình thấy cái bài này rất hay.

.ripple {
background-position: center;//hình nền ở vị trí trung tâm
transition: background 0.8s;// thời gian chuyển tiếp của background là 0.8s
}
.ripple:hover {
background-color: red;// màu nền
background-image: radial-gradient(circle, transparent 1%, yellow 1%);//hình nền là radient có dạng circle, chạy từ trung tâm đi ra ngoài, chuyển tiếp từ 1%. (Hình nền không hiển thị vì có background-color)
background-size: 15000%;// kích thước hình nền 1500%, phóng to để thấy được sự chuyển tiếp
}
.ripple:active {
background-color: blue;// màu nền
background-size: 100%;// mình chưa hiểu rõ tại sao lại cho background-size là 100% thì màu blue chiếm có tý, còn cho màu blue 1% thì nó chiếm cả button?
transition: background 0s;// thời gian chuyển tiếp của background la 0s, nghĩa là nhấn vào thả ra là mất màu xanh ngay lập tức
}

Làm ơn giúp với, mình rất muốn biết cách nó hoạt động như thế nào!

Lovemagic · April 9, 2018, 1:49pm

Theo kiến thức css hạn hẹp của mình thì có thể hiểu như này:

Radical-Gradient đang đc lấy làm background-image nên có thể tạm coi đây là 1 cái ảnh có dạng gradient tròn
Việc nó di chuyển chính là do background-size, khi click, background-size là 100%, click xong chuyển sang hover nên background-size tăng lên. Tức là ảnh gradient tròn được phóng to từ từ qua transaction.

Mình làm 1 cái tương tự là Button2, copy y hệt, chỉ thay radical-gradient = ảnh cứng.

Hoai_Thu1 · April 9, 2018, 12:53pm

Cảm ơn bạn nhiều nha, giờ mình hiểu ra bởi vì mình lẫn lộn giữa background-color và background-image. Cứ nghĩ background-image nằm ở dưới background-color.

Đây là cách hiểu của mình:
Mặc định “background-image: tấm hình màu yellow có vòng tròn trong suốt ở giữa” được đặt nằm trên màu red và màu blue, bởi vì nó là background_image. Và background-size chỉ ảnh hưởng lên background-image.

Khi hover vào button, background_image bây giờ đã bị phóng quá to, có để lộ vòng tròn trong suốt ở giữa nên mới nhìn thấy màu red nằm ở dưới).
Ngay khi nhấn vào button, lập tức background_image bây giờ nhỏ lại 100% (transition: 0s), nhưng vẫn còn để lộ một tý trong suốt như một cái chấm và để lộ màu blue ở dưới.
Sau khi thả chuột (hover), background_image từ 100% phóng to ra 15000% để lộ màu blue ngày càng to, quá trình phóng to xảy ra trong 0.8s và sau khi nó phóng to ra 15000% thì màu xanh biến mất nên để lộ ra màu red.