Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
25 Ví Dụ Cursor CSS Javascript Đẹp Cho Webiste

25 Ví Dụ Cursor CSS Javascript Đẹp Cho Webiste


Ngày 25 Tháng 10 Năm 2021

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 cursor như ví dụ dưới đây nha:

HTML

<div class="container">
  <p>Thay Đổi Cursor</p>
</div>

CSS

body {
    padding: 25px;
}
 .container {
    background: #191970;
    color: white;
    width: 200px;
    height: 200px;
    line-height: 200px;
    white-space: nowrap;
    text-align: center;
    cursor: help;
}

Kế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 CSS

Trong 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 CSS

The Cursors Of CSS

Còn dưới đây là kết quả trên Codepen nha.

See the Pen The Cursors! by Chris Coyier (@chriscoyier) on CodePen.

Custom Dot Cursor

Custom Dot Cursor

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Custom Dot Cursor by Kyle Brumm (@kjbrum) on CodePen.

Custom Cursor

Custom Cursor

Cò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 mode

Custom cursor with blend mode

Cò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.

Custom cursors using data-uri

Custom cursors using data-uri

Cò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.

Mouse Cursor Effect Javascript

Mouse Cursor Effect Javascript

Cò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.

Creating Custom Cursors

Creating Custom Cursors

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Creating Custom Cursors by designcourse (@designcourse) on CodePen.

Interactive Custom Cursor

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Interactive Custom Cursor by hb nguyen (@hbthen3rd) on CodePen.

Cursor CSS Đẹp

Cursor CSS Đẹp

Cò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.

Circle Cursors HTML CSS

Circle Cursors HTML CSS

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Circle Cursors by Chris Heuberger (@ChrisBup) on CodePen.

Custom Cursor CSS Code

Custom Cursor CSS Code

Cò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 Effect

Custom Cursor Effect

Cò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.

Custom Cursor HTML Code

Custom Cursor HTML Code

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Custom cursor by Tim Jackleus (@timjackleus) on CodePen.

Animated Cursor React Component

Animated Cursor React Component

Cò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.

Custom Cursor Inverting Color

Custom Cursor Inverting Color

Cò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.

Custom cursor with Vue.js

Custom cursor with Vuejs

Cò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.

Custom Cursor By Url

Custom Cursor By Url

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Custom cursor images 🔥 by Franz (@fmressel) on CodePen.

Custom Cursor By Image

Custom Cursor By Image

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Untitled by Geoff Graham (@geoffgraham) on CodePen.

Animated Cursor Javascript

Animated Cursor Javascript

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Cursor - Mouse Effect by Omar Zikry (@Omarzikry) on CodePen.

HTML Code For Mouse Cursor

HTML Code For Mouse Cursor

Cò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.

Custom Cursor Hover Effect

Custom Cursor Hover Effect

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Custom cursor hover effect by ihelai (@ihelai) on CodePen.

Custom Cursor Navigation Effect

Custom Cursor Navigation Effect

Cò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.

Mutant Cursor

Mutant Cursor

Còn dưới đây là kết quả trên Codepen nha.

See the Pen Mutant Cursor by Rafael González (@rgg) on CodePen.

Custom cursor with GSAP

Custom cursor with GSAPr

Cò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.

Cursor effects

Cursor effectsr

Cò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.

Emoji Cursor

Emoji Cursor

Còn dưới đây là kết quả trên Codepen nha.

See the Pen emoji cursor by Rob DiMarzo (@robdimarzo) on CodePen.

Tổ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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.