Thuộc tính transition tạo hiệu ứng chuyển đổi

Giả sử bạn muốn di chuột lên menu, bạn muốn phần tô đậm nó không hiện ra liền mà hiện ra trễ một chút để tạo hiệu ứng rớt đuôi (kiểu đuôi lửa của máy bay phản lực đó). Thì bạn chỉ cần thêm thuộc tính transition và giảm thời gian nó xuống.

Ví dụ:


.class{
    background-color:#333333;
    transition: 0.4s;
}

.class:hover{
    background-color:#000000;
}

– Ở lớp class: Mình đặt background là màu xám (#333333). Và đặt thuộc tính transition, gán thời gian là 0.4s (s là giây). Nghĩa là nó sẽ chuyển đổi chậm 0.4s, số càng lớn thì nó chuyển càng chậm.

– Ở lớp class:hover: Có nghĩa là những thuộc tính khi di chuột lên, mình chọn background là màu đen (#000000).

Giải thích từ ngữ:

– Backgounr: Nền / màu nền / hình nền.

– Transition: Chuyển đổi.

– Hover: Di chuột lên.

Author
Recent Posts

Trần Thành

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.

Leave a Comment Cancel reply