Con trỏ trong css
|
Trong thiết kế website hay lập trình website thì việc thiết kế làm thế nào để thu hút người dùng nhấn vào các nút (nút) điều hướng là rất quan trọng Show Hôm nay mình sẽ hướng dẫn bạn tạo hiệu ứng rê chuột (hover css) thú vị trí trong CSS với 3 bước 1. 2. 3. Hiệu ứng rê chuột trong CSS
Vì vậy, hãy làm cho họ thấy thú vị. Nâng cao cảm xúc, năng lượng của họ lên để có được tỷ lệ chuyển đổi cao Hãy cùng bắt đầu với các nút, bạn có muốn nhấn vào nút bên dưới không? Làm thế nào bạn làm được tương tự để trang web của bạn nổi bật như thế nào? 1. Please started with verify the position of con trỏ chuộtCông việc đầu tiên chúng ta cần làm là theo dõi vị trí con chuột document.querySelector('.button').onmousemove = (e) => {____1 e.target.style.setProperty('--x', `${ x }px`)
e.target.style.setProperty('--y', `${ y }px`)
}
Vâng, chỉ có 9 dòng mã để chọn CSS của bạn định vị trí con chuột của người dùng. Số lượng hiệu ứng mà bạn có thể đạt được với thông tin này là rất lớn. Nhưng chúng ta hãy hoàn thành CSS đầu tiên 2. Kích hoạt gradientBây giờ chúng ta có trạng thái được lưu trữ trong các biến CSS và chúng ta có thể sử dụng chúng ở khắp mọi nơi trong CSS của chúng ta .button {
position: relative;
appearance: none;
background: #f72359;
padding: 1em 2em;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 100px; span {
position: relative;
} &::before {
--size: 0; content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
} &:hover::before {
--size: 400px;
}
}
Vui lòng tự tay thử nghiệm và thay đổi các giá trị để hiểu tại sao nó hoạt động 3. Và đây là kết quả sau khi tạo hiệu ứng rê chuột trong CSSHiệu ứng rê chuột này cũng không quá khó phải không nào. Bạn có thể thay đổi gradient để phù hợp với màu sắc trang web của mình Quan trọng là bạn nắm bắt được hiệu ứng. Đặt nó vào đâu để làm cho người dùng thích thú là công việc của bạn. Hãy tạo hiệu ứng rê chuột trong CSS tuyệt vời với biến CSS cho trang web của bạn ngay bây giờ bất kỳ > Đừng quên, tất cả những kiến thức này cũng sẽ được dạy trong khóa học LẬP TRÌNH PHP hoặc LẬP TRÌNH JAVA WEB tại NIIT - ICT Hà Nội HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội SĐT. 02435574074 - 0383. 180086 E-mail. xin chào@niithanoi. giáo dục. vn trang chủ. https. //Facebook. com/NIIT. CNTT-TT/ #niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp
Nội dung chính Hiển thị Định nghĩa và sử dụngThuộc tính con trỏ hiển thị con trỏ chuột khi duy nhất chuyển con trỏ vào thành phần ConstructorWith the value as after Please di chuyển con trỏ chuột tới từng định dạng để xác định sự kiện hiển thị Thuộc tính giá trịVí dụMô tả con trỏ tự động. auto;Trình duyệt tự động thiết lập con trỏ chuột, đây là định dạng mặc định. con trỏ hình chữ thập. crosshair;Con trỏ chuột dạng chữ thập. con trỏ mặc định. default;Con trỏ chuột dạng mặc định. thay đổi kích thước con trỏ điện tử. e-resize;Con trỏ chuột dạng e-resize. con trỏ trợ giúp. help;Con trỏ chuột định dạng trợ giúp. con trỏ di chuyển. di chuyển;Con trỏ chuột dạng di chuyển. con trỏ n-thay đổi kích thước. n-resize;Con trỏ chuột format n-resize. ne-resizecursor. ne-resize;Con trỏ chuột dạng ne-resize. nw-resizecursor. nw-resize;Con trỏ chuột dạng nw-resize. con trỏ. pointer;Con trỏ chuột dạng con trỏ. con trỏ tiến bộ. Progress;Con trỏ chuột dạng tiến trình. con trỏ thay đổi kích thước s. s-resize;Con trỏ chuột format s-resize. se-resizecursor. se-resize;Con trỏ chuột định dạng se-resize. thay đổi kích thước con trỏ sw. sw-resize;Con trỏ chuột dạng sw-resize. con trỏ văn bản. text;Con trỏ chuột dạng văn bản. w-resizecursor. w-resize;Con trỏ chuột format w-resize. con trỏ đợi. wait;Con trỏ chuột dạng wait. kế thừa con trỏ. kế thừa;Xác định quyền thừa kế thuộc tính từ thành phần cha (thành phần bao bên ngoài)Ví dụviết HTML________số 8Show the browser when not have CSSviết CSSShow the browser when has CSSDi chuyển con trỏ vào văn bản sẽ thấy hiệu ứng Support browserCon trỏ thuộc tính được hỗ trợ trong nhiều trình duyệt Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 yêu cầu phải có. loại tài liệu Ví dụCSS có thể tạo ra một loạt các con trỏ chuột khác nhau .alias {cursor: alias;} Tự mình thử » Định nghĩa và cách sử dụngThuộc tính Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính con trỏ thuộc tính5. 05. 54. 05. 09. 6Cú pháp CSSGiá trị tài sảnGiá trị Mô tảDemoaliasCon trỏ cho biết bí danh của nội dung nào đó sẽ được tạoPhát nó »cuộn toàn bộCon trỏ cho biết rằng nội dung nào đó có thể được cuộn theo bất kỳ hướng nàoPhát nó »autoDefault. Trình duyệt đặt con trỏ Phát » ôCon trỏ cho biết một ô (hoặc tập hợp các ô) có thể được chọn Phát » thay đổi kích thước cột Con trỏ cho biết cột có thể được thay đổi kích thước theo chiều ngangPhát » menu ngữ cảnh Con trỏ cho biết có sẵn menu ngữ cảnhPhát . Ghi chú. Luôn chỉ định một con trỏ chung ở cuối danh sách, trong trường hợp không thể sử dụng con trỏ do URL xác định Phát nó »văn bản dọc Con trỏ cho biết văn bản dọc có thể được chọn Phát nó »w-thay đổi kích thước Con trỏ cho biết rằng một cạnh của một . Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kếTrang liên quanTham chiếu DOM HTML. thuộc tính con trỏ |
