Cursor pointer css là gì
|
Con trỏ chuột (mouse pointer) hoặc con trỏ (cursor) là một hình ảnh đồ họa có thể nhìn thấy được hiển thị trên màn hình máy tính. Bằng cách di chuyển chuột (mouse), người dùng máy tính có thể di chuyển con trỏ chuột (mouse pointer) xung quanh màn hình (screen). Vị trí của con trỏ chuột trên màn hình có thể xác định cách thức và vị trí người dùng có thể nhấn một nút (button) trên chuột để nhập văn bản hoặc thực hiện lệnh. Show
Con trỏ chuột (mouse pointer ) mặc định trên máy tính thường có hình mũi tên hoặc hình bàn tay. Mũi tên thường hướng về phía trên cùng của màn hình và hơi nghiêng về bên trái. Giao diện đồ họa người dùng (graphical user interface) sử dụng các mũi tên để chỉ ra vị trí của chuột trên màn hình hiển thị và một con trỏ dạng đường thẳng kẻ đứng (giống chữ I) để hiển thị nơi có thể chèn văn bản. Các giao diện người dùng văn bản như Linux và MS-DOS có thể sử dụng hình chữ nhật thay cho mũi tên hoặc bàn tay. Khi người dùng thao tác với chuột, con trỏ chuột (mouse pointer) sẽ di chuyển xung quanh màn hình. Khi con trỏ chuột (mouse pointer) được đặt ở vị trí có thể nhập văn bản, con trỏ có thể nhấp nháy khi nó đoán trước khi nhập. Nếu người dùng muốn tắt con trỏ nhấp nháy, họ có thể thay đổi cài đặt của con trỏ, bao gồm khả năng hiển thị và tốc độ nhấp nháy (blink rate), tùy thuộc vào giao diện (interface). Con trỏ thường thay đổi cách chúng được hiển thị trên màn hình do cách chúng được sử dụng và thao tác. Ví dụ: khi chọn hoặc chỉnh sửa văn bản, người dùng có thể thấy con trỏ của họ giống chữ I. Trong một số tài liệu (document), người dùng có thể bắt gặp con trỏ bàn tay (hand cursor) dường như có tất cả các ngón tay mở rộng. Khi sử dụng phần mềm chỉnh sửa đồ họa, người dùng có thể nhận thấy rằng con trỏ thay đổi tương ứng với chức năng cụ thể mà họ đang sử dụng; chẳng hạn như một con trỏ bút chì có thể đi kèm với chức năng bút chì của chương trình. Thay đổi kích thước các đối tượng trên màn hình máy tính có thể dẫn đến một con trỏ giống như một mũi tên kép. Mũi tên kép có thể trỏ theo chiều ngang, chiều dọc hoặc đường chéo, tùy thuộc vào cách người dùng muốn thay đổi kích thước đối tượng. Đồng hồ cát có thể xuất hiện khi máy tính đang bận thực hiện một quá trình mà không thể làm gián đoạn quá trình nhập liệu. Khi người dùng bắt gặp một liên kết (link) trên Internet, con trỏ có thể chuyển thành bàn tay có ngón trỏ trỏ vào liên kết. Người dùng không bị giới hạn trong việc sử dụng con trỏ chuột (mouse pointer) mặc định trên màn hình máy tính của họ. Nếu họ chọn sử dụng các con trỏ khác nhau, các cài đặt có thể được thay đổi trong control panel của họ để phản ánh sở thích của họ. Ngoài ra, có thể tải xuống các con trỏ chuột (mouse pointer) khác nhau. Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu thay đổi cursor cho website và các ví dụ về curosr đẹp được xây dựng bằng HTML, CSS và JS nha. Cách Thay Đổi Cursor Bằng CSSĐể thay đổi hình dáng curosr trong website thì chúng ta sẽ sử dụng thuộc tính HTMLCSSKết quả cuối cùng bạn xem Codepen dưới đay nha: See the Pen change cursor by haycuoilennao19 (@haycuoilennao19) on CodePen. Các Ví Dụ Khác Về Cursor CSSTrong phần này chúng ta sẽ tìm hiểu các hiệu ứng cursor css đẹp khác cho website nha. The Cursors Of CSSCòn dưới đây là kết quả trên Codepen nha. See the Pen The Cursors! by Chris Coyier (@chriscoyier) on CodePen. NguồnCustom Dot CursorCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom Dot Cursor by Kyle Brumm (@kjbrum) on CodePen. NguồnCustom CursorCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom Cursor by Siamak (@siamak) on CodePen. Custom cursor with blend modeCòn dưới đây là kết quả trên Codepen nha. See the Pen Circle cursor with blend mode by Clement Girault (@clementGir) on CodePen. NguồnCustom cursors using data-uriCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom cursors using data-uri by Sten Hougaard (@netsi1964) on CodePen. NguồnMouse Cursor Effect JavascriptCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom Cursor - Circle Follows The Mouse Pointer by Cojea Gabriel (@gabrielcojea) on CodePen. NguồnCreating Custom CursorsCòn dưới đây là kết quả trên Codepen nha. See the Pen Creating Custom Cursors by designcourse (@designcourse) on CodePen. NguồnInteractive Custom CursorCòn dưới đây là kết quả trên Codepen nha. See the Pen Interactive Custom Cursor by hb nguyen (@hbthen3rd) on CodePen. NguồnCursor CSS ĐẹpCòn dưới đây là kết quả trên Codepen nha. See the Pen 3d Animation Page With Pure Css by Swarup Kumar Kuila (@uiswarup) on CodePen. NguồnCircle Cursors HTML CSSCòn dưới đây là kết quả trên Codepen nha. See the Pen Circle Cursors by Chris Heuberger (@ChrisBup) on CodePen. NguồnCustom Cursor CSS CodeCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom Cursor by Joshua Ward (@joshuaward) on CodePen. Custom Cursor EffectCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom Cursor Effect by Ivan Grozdic (@ig_design) on CodePen. NguồnCustom Cursor HTML CodeCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom cursor by Tim Jackleus (@timjackleus) on CodePen. NguồnAnimated Cursor React ComponentCòn dưới đây là kết quả trên Codepen nha. See the Pen React Animated Custom Cursor by Stephen Scaff (@StephenScaff) on CodePen. NguồnCustom Cursor Inverting ColorCòn dưới đây là kết quả trên Codepen nha. See the Pen custom cursor inverting color by Uwe Chardon (@uchardon) on CodePen. NguồnCustom cursor with Vue.jsCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom cursor with Vue.js by Ayvazov Kenan (@kezov) on CodePen. NguồnCustom Cursor By UrlCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom cursor images 🔥 by Franz (@fmressel) on CodePen. NguồnCustom Cursor By ImageCòn dưới đây là kết quả trên Codepen nha. See the Pen Untitled by Geoff Graham (@geoffgraham) on CodePen. NguồnAnimated Cursor JavascriptCòn dưới đây là kết quả trên Codepen nha. See the Pen Cursor - Mouse Effect by Omar Zikry (@Omarzikry) on CodePen. NguồnHTML Code For Mouse CursorCòn dưới đây là kết quả trên Codepen nha. See the Pen Trend Of 2019: Custom Cursor with snapping by Katia (@katiasmet) on CodePen. NguồnCustom Cursor Hover EffectCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom cursor hover effect by ihelai (@ihelai) on CodePen. NguồnCustom Cursor Navigation EffectCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom Cursor Navigation Effect by Mark Mead (@markmead) on CodePen. NguồnMutant CursorCòn dưới đây là kết quả trên Codepen nha. See the Pen Mutant Cursor by Rafael González (@rgg) on CodePen. NguồnCustom cursor with GSAPCòn dưới đây là kết quả trên Codepen nha. See the Pen Custom cursor with GSAP TweenMax and CSS by Karlo Videk (@karlovidek) on CodePen. NguồnCursor effectsCòn dưới đây là kết quả trên Codepen nha. See the Pen Magnetic Hover Interaction by Sikriti Dakua (@dev_loop) on CodePen. NguồnEmoji CursorCòn dưới đây là kết quả trên Codepen nha. See the Pen emoji cursor by Rob DiMarzo (@robdimarzo) on CodePen. NguồnTổng kết:Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những Custom cursor css js hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ! |
