Hiệu ứng di chuột CSS - cho hình ảnh, nút, khi di chuột qua các liên kết, khối, v.v. CSS:hover. Hiệu ứng di chuột ban đầu

Ý tưởng tách việc trình bày thông tin khỏi mã tạo và xử lý nó trở nên hoàn toàn mới. Đây là một quyết định mạnh mẽ vào thời điểm đó, nhưng quan điểm này khi đó chưa được thừa nhận đầy đủ. Khi việc lập trình tách khỏi máy tính cá nhân nhưng không trở thành người chiến thắng trong mạng nội bộ hoặc một vùng miền duy nhất và ngay lập tức lan rộng khắp nơi, chỉ khi đó người ta mới thấy rõ rằng việc trình bày thông tin (về mặt thiết kế) và làm việc với nó (về mặt mã) là hai mặt trên cùng một mặt phẳng.

Ba khía cạnh của phát triển trang web

Từ quan điểm hình thức, có ba thành phần chính (ở các dạng cú pháp khác nhau) tạo nên một trang web: mã PHP, mã JavaScript và biểu định kiểu CSS. Việc sử dụng tên hoặc phiên bản của thành phần này hay thành phần kia hoàn toàn không quan trọng, cái gì Phiên bản HTMLđánh dấu được sử dụng và phiên bản trình duyệt nào được cài đặt. Ngày nay, khả năng tương thích không được đánh giá cao bởi vì tại mọi thời điểm đều có liên quan: nội dung được mã hóa và nội dung được mã hóa có thể được hiển thị và thực thi.

Nếu trước đây các bên tranh cãi về ý tưởng thì ngày nay các nhà xây dựng tiêu chuẩn trong lĩnh vực công nghệ Internet và trình duyệt lại thích đấu tranh một cách vô ích.

Cá nhân và công cộng

Có nhiều phương tiện để truy cập Internet (máy tính, máy tính xách tay, máy tính bảng, điện thoại thông minh) và cũng có rất nhiều trình duyệt. Không có gì đảm bảo rằng một thiết bị sẽ hiển thị trang web ở dạng mà nhà phát triển đã tạo ra nó. Những nỗ lực sau này không phải lúc nào cũng đạt được mục tiêu và mang lại cho thiết kế web một sự đa dạng duy nhất, tức là sự thống nhất trong việc thể hiện bản chất, ở bất cứ nơi nào nó được tiết lộ cho khách truy cập.

Bằng cách tách biệt cá nhân và công cộng, chỉ sử dụng những gì phù hợp sau này, bạn có thể đạt được thành công rõ rệt trong thiết kế. Vẻ đẹp, khoảnh khắc nghệ thuật và thiết kế web là định mệnh của các chuyên gia và tài năng có liên quan. CSS là mã, mặc dù nó rất độc đáo. Mối quan tâm của anh ấy là mô tả các phong cách (các tùy chọn hiển thị thông tin). Với sự xuất hiện thiêt bị di động CSS đã được tải bằng mã hóa thực dưới dạng truy vấn phương tiện. Vì vậy, khả năng tái kết hợp giữa thiết kế và mã không phải là viển vông như cách đây vài năm.

Khi phát triển các kiểu CSS, nhà phát triển dựa vào kinh nghiệm đã được chứng minh của cá nhân mình và những thiết kế CSS đó hoạt động trên hầu hết các trình duyệt và làm hài lòng phần lớn khách truy cập trang web. Bạn nên sử dụng cái thứ nhất càng nhiều càng tốt và cái thứ hai càng ít càng tốt, khi đó sẽ có cơ hội lớn hơn nhiều để đạt được kết quả hầu như luôn luôn và ở mọi nơi.

Nguyên tắc đầu tiên: hy vọng đạt tiêu chuẩn nhưng đừng tự mình phạm sai lầm

CSS:hover là khi chuột “nhập” một thành phần trang. Khi nhấp chuột vào một phần tử, phần tử đó sẽ hoạt động nhưng khi con trỏ di chuyển sang một bên, phần tử đó lại có thể thay đổi và hiển thị ở trạng thái hoạt động. “:hover”, “active” và “visited” là các lớp giả phổ biến nhất khi mô tả kiểu.

Trong mã trang web, rất thuận tiện để không phải lo lắng về những điều nhỏ nhặt như di chuyển chuột qua các phần tử. Bằng cách cung cấp hai mô tả trong bảng mô tả kiểu:

màu nền: xanh lá cây;

Chúng tôi nhận được nó khi bạn di chuột qua phần tử thay đổi tự động tô màu văn bản từ đen sang trắng và thay đổi nền của thành phần này thành màu xanh lá cây. Các lớp giả có thể được áp dụng cho bất kỳ phần tử nào và đạt được nhiều hiệu ứng hình ảnh khác nhau.

Quy tắc thứ hai: khi tin tưởng vào các tiêu chuẩn, hãy tập trung vào mã của bạn

Mọi thứ sẽ ổn nếu sự tiến bộ vẫn ở mức máy tính và máy tính xách tay được trang bị chuột và tiến bộ trong thông tin di động không dẫn đến sự xuất hiện của điện thoại thông minh, máy tính bảng và các thiết bị di động khác, việc kết nối những thiết bị như vậy là rất khó khăn.

Mặt khác, chỉ trên các thiết bị được trang bị màn hình cảm ứng đặc biệt mới có thể thao tác ngón tay trực tiếp trên màn hình cảm ứng, như đã trở nên phổ biến trên điện thoại thông minh, máy tính bảng và các thiết bị tương tự.

Có một sự khác biệt đáng kể và:hover ở đây hoàn toàn không hoạt động như chúng ta mong muốn. Bạn không thể thực hiện việc này nếu không có mã và việc sử dụng truy vấn phương tiện không giải quyết được tất cả vấn đề.

Khả năng tương thích quá đắt trong thời đại ngày nay thế giới thông tin, do đó, để đảm bảo chức năng phù hợp của trang web trong các yêu cầu đã thiết lập về thiết kế web và triển khai chức năng, tốt nhất nên tập trung vào các trường hợp sử dụng được yêu cầu tối thiểu: di chuột CSS, tiêu điểm di chuột CSS, CSS di chuột hoạt động (đã truy cập). Càng nhiều mã (cả trong trình duyệt và trên máy chủ) kiểm soát thiết kế web thì càng tốt. Một chương trình là sự kiểm soát, sẽ tốt hơn khi sự kiểm soát này không tuân theo các tiêu chuẩn hiện hành, từ đó bạn thường không biết điều gì sẽ xảy ra.

Các nút và các thành phần trang khác

CSS di chuột bằng nút là một giải pháp tuyệt vời, nhưng nhìn chung mỗi phần tử trang là một “nút”. Trước hết, trang web phải còn hoạt động và nếu điều này không được bao gồm trong mã, nếu nhiệm vụ là tạo một trang web phát triển phù hợp với lĩnh vực ứng dụng và hoạt động có tính đến hành vi của khách truy cập thì ít nhất bằng cách sử dụng các kiểu CSS, bạn có thể thêm sự sống động cho các thành phần trang.

Sử dụng hiệu ứng di chuột rất thuận tiện. Với sự trợ giúp của họ, bạn có thể dễ dàng thêm sức sống cho các trang, nhưng mã không biết chuột đang làm gì trên màn hình nếu nó không có khả năng theo dõi chuyển động của nó. Từ quan điểm này, tức là khi mã điều khiển chuyển động của chuột (= chuyển động của ngón tay trên điện thoại thông minh), nó có thể làm nổi bật phần tử hoặc biến đổi nó một cách độc lập. Điều này không liên quan gì đến các lớp giả, nhưng nó mang lại toàn quyền kiểm soát mã phía trên giao diện của trang, cho phép bạn hiển thị nó đầy đủ trên nhiều thiết bị khác nhau trong các trình duyệt khác nhau.

Những cạm bẫy trong style sheet

Không thể nói rằng các tiêu chuẩn trong lĩnh vực mô tả kiểu CSS không biết họ đang làm gì, nhưng cũng không thể nói rằng chúng tương tác hoàn toàn với các tiêu chuẩn khác trong lĩnh vực lập trình Internet.

Kiểu và lớp giả có thể được mô tả ở giai đoạn mã hóa trang, tại thời điểm máy chủ tạo trang và ở trạng thái động: đã có trong trình duyệt, bạn có thể dễ dàng tạo một phong cách mới và thay đổi cái hiện có.

Sử dụng AJAX, khi không cần tạo lại trang để hiển thị phản ứng với hành động của khách truy cập mà việc thay đổi thành phần của nó hoặc một số thành phần sẽ thêm một chút “gia vị”. “Tình bạn” của các mã - những gì đã có trong trình duyệt (JavaScript) và những gì trên máy chủ (PHP) - là của tác giả trang web (lập trình viên).

Không chỉ việc hiển thị các thành phần của nó trên trang mà còn nhận thức sâu hơn về mã của chúng phụ thuộc đáng kể vào cách thực thi thuật toán cho tương tác này. Nói một cách đơn giản, các lớp giả (đặc biệt) rất tốt cho điều kiện tĩnh, giống như một chiếc du thuyền buồm trên vùng biển trong xanh với gió nhẹ - mọi thứ đều rõ ràng, dễ tiếp cận và có thể kiểm soát được. Nếu thời tiết thay đổi, gió nổi lên hoặc du khách gây ra trường hợp khẩn cấp, bạn có thể nhanh chóng va vào rạn san hô và mất khách.

Tiêu chuẩn và mô phỏng của nó

Di chuột có thể được mô phỏng thông qua JavaScript bằng cách sử dụng các sự kiện onmouseover và onmouseout. Thường thì đây là nơi mọi chuyện kết thúc. Theo quan điểm thông thường, khi Chúng ta đang nói về Khi nói đến việc tạo ra một trang web thực sự hoạt động, tốt hơn hết bạn nên giữ quyền kiểm soát trong tay mình hơn là để nó phụ thuộc vào các tiêu chuẩn hoang đường thay đổi ngoài ý muốn và mong muốn của nhà phát triển.

Đôi khi bạn có thể đọc được điều gì đó như " Cơ hội này thậm chí có sẵn trong IE,” nhưng bạn có thể đọc thường xuyên hơn về những mô tả phong cách nào được một trình duyệt cụ thể cảm nhận. Ít thường xuyên hơn bạn có thể tìm hiểu về sự khác biệt của JavaScript trong một số trình duyệt nhất định.

Đánh giá kinh nghiệm tích lũy, ngưỡng mộ khả năng của Chrome và Opera, chỉ trích sự chậm chạp và quán tính của trình duyệt từ nhà sản xuất (lập trình viên IE khó quên của Microsoft, được mọi lập trình viên yêu mến: "Tốt lắm rồi trình duyệt web IE Chỉ có kẻ lười biếng mới không la mắng. Hoặc ai đó chỉ biết chơi Klondike trên máy tính,”- trích dẫn từ một tác giả Internet vô danh), bạn nên tuân theo ý nghĩa vàng: sử dụng những gì hoạt động ở mọi nơi và luôn luôn.

Mọi người cần tiền để làm việc; khi cần cảm giác mạnh, họ thường đến văn phòng đăng ký hoặc rạp hát chứ không đến Internet.

Thi đua và kiểm soát

Trước đây, khi lập trình đang phát triển, người ta thường nghe lời người lớn tuổi và viết đúng. Ngày nay có quá nhiều người lớn tuổi, mọi thứ thay đổi quá nhanh, và nếu bạn lắng nghe mọi người thì sẽ không có đủ thời gian dù chỉ rất nhiều. công việc đơn giản, đến một trang web có chức năng tối thiểu.

Lập trình trước hết là kiểm soát và trong trường hợp tiêu chuẩn đặt ra các quy tắc một cách sai lệch hoặc người ta có thể mong đợi một sự thay đổi mạnh mẽ trong quy tắc, việc loại bỏ quy tắc đó và xuất hiện một quy tắc mới, giải pháp tốt nhất Luôn luôn không phải là đưa ra bất kỳ quyết định nào mà là triển khai chức năng cần thiết của trang web với mã hoạt động tối thiểu có thể nhưng thực tế.

Hiệu ứng di chuột mang lại cho bất kỳ trang web nào một cái nhìn năng động và sống động. Thông thường, họ sử dụng mã JavaScript, nhưng với sự ra đời của CSS3, bạn không còn có thể chỉ sử dụng các công cụ tạo kiểu nữa.

Các hiệu ứng được trình bày trong tài liệu này hoạt động trên các trình duyệt hiện đại. Hỗ trợ của IE phụ thuộc vào phiên bản và phải được kiểm tra kỹ lưỡng trước khi sử dụng nó trong một dự án thực tế.

giật lên

Hiệu ứng này hoạt động tốt khi bạn có nhiều phần tử được căn chỉnh theo chiều ngang. Di chuyển con trỏ chuột dọc theo thước như vậy sẽ tạo ra một làn sóng.

Nó rất dễ làm. Đối với mỗi phần tử, một trường được xác định và khi bạn di con trỏ chuột, kích thước của trường sẽ giảm đi. Giá trị ban đầu Lề 15px thì giảm xuống còn 2px khiến ảnh bị “nảy lên”. Hiệu ứng này cũng có thể được sử dụng cho văn bản trong danh sách.

Thuộc tính chuyển tiếp được sử dụng ở đây như một phần bổ sung, vì hiệu ứng sẽ trông tuyệt vời nếu không có nó. Nó mang lại hiệu ứng mượt mà.

CSS

Ex1 img( border: 5px Solid #ccc; float: left; lề: 15px; -webkit-transition: lề 0,5 giây dễ dàng; -moz-transition: lề 0,5 giây dễ dàng; -o-transition: lề 0,5s easy-out; ) .ex1 img:hover ( lề-top: 2px; )

Khi bạn di chuột qua từng hình ảnh, kích thước của nó sẽ tăng dần và khi bạn mất tiêu điểm, nó sẽ trở về kích thước ban đầu.

Vì hiệu ứng này một bộ hình ảnh có kích thước 400x133 px được sử dụng. Sau đó, chúng được giảm kích thước trong mã CSS xuống 300x100 px và được mở rộng khi di chuột qua. Căn giữa theo chiều ngang được sử dụng và hình ảnh đã thay đổi kích thước có thể làm hỏng mọi thứ, do đó áp dụng giá trị lề âm bằng một nửa chiều rộng.

CSS

#container ( chiều rộng: 300px; lề: 0 tự động; ) #ex2 img( chiều cao: 100px; chiều rộng: 300px; lề: 15px 0; -webkit-transition: tất cả 1 giây đều dễ dàng; -moz-transition: tất cả 1 giây đều dễ dàng; -o -transition: tất cả 1 giây đều dễ dàng; ) #ex2 img:hover ( chiều cao: 133px; chiều rộng: 400px; lề trái: -50px; )

Hiệu ứng này rất giống sử dụng JavaScript, khi bạn di chuột qua một đối tượng, một đối tượng khác sẽ xuất hiện. Để đạt được điều này, hình ảnh và văn bản được đặt trong cùng một vùng chứa div và sau đó mọi thứ được dịch chuyển sang trái để cả hai thành phần đều ở cùng cấp độ. Sau đó chúng ta áp dụng tính chất màu sắc: trong suốt Và chiều cao dòng: 0px cho phần tử div. Điều này đặt văn bản ở đầu div và ẩn nó.

Để làm cho văn bản xuất hiện khi di chuột qua, chúng ta chỉ cần thay đổi màu sắc và chiều cao của dòng. Điều này tạo ra hiệu ứng hiển thị văn bản theo tỷ lệ.

CSS

#ex3 ( chiều rộng: 730px; chiều cao: 133px; chiều cao dòng: 0px; màu: trong suốt; cỡ chữ: 50px; họ phông chữ: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: chữ hoa; -webkit-transition: dễ dàng hết 0,5 giây; -moz-transition: dễ dàng hết 0,5 giây; -o-transition: dễ dàng hết 0,5 giây; ) # ex3:hover ( chiều cao dòng: 133px; màu: #575858; ) #ex3 img( float: left; lề: 0 15px; )

Đây là một trong những hiệu ứng đơn giản nhưng rất thú vị dành cho một phòng trưng bày thu nhỏ. Nó dựa trên việc tạo một mảng hình ảnh và xoay hình ảnh mà con trỏ chuột nằm trên đó.

Có rất nhiều cái mới, dành riêng cho trình duyệt được sử dụng cho hiệu ứng này. Thuộc tính CSS, vì vậy nó sẽ không hoạt động trong các trình duyệt cũ hơn. Thư viện sử dụng bóng, chuyển tiếp và biến đổi.

Nếu muốn đa dạng hóa hiệu ứng hơn nữa, bạn có thể sử dụng bộ chọn giả để xoay hình ảnh ở các góc khác nhau và theo các hướng khác nhau.

CSS

#ex4 ( chiều rộng: 800px; lề: 0 tự động; ) #ex4 img ( lề: 20px; đường viền: 5px Solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); - moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: tất cả đều dễ dàng 0,5 giây; -moz-transition: dễ dàng trong tất cả 0,5 giây; -o-transition: dễ dàng trong tất cả 0,5 giây; ) #ex4 img:hover ( -webkit-transform: xoay(-7deg); -moz-transform: xoay(-7deg); - o-biến đổi: xoay(-7deg); )

Đây là một hiệu ứng tuyệt vời và phức tạp. Ban đầu, hình ảnh có độ trong suốt nhẹ, sau đó khi con trỏ chuột di chuột qua nó, độ trong suốt bị loại bỏ hoàn toàn, xuất hiện quầng sáng xung quanh và hình ảnh phản chiếu (chỉ dành cho trình duyệt Webkit).

CSS

#ex5 ( chiều rộng: 700px; lề: 0 tự động; chiều cao tối thiểu: 300px; ) #ex5 img ( lề: 25px; độ mờ: 0,8; đường viền: 10px rắn #eee; /*Transformation*/ -webkit-transition: tất cả 0,5 dễ dàng; -moz-transition: dễ dàng tất cả 0,5 giây; -o-transition: dễ dàng tất cả 0,5 giây; /*Reflection*/ -webkit-box-reflect: dưới 0px -webkit-gradient(tuyến tính, trên cùng bên trái, phía dưới bên trái, from(trong suốt), color-stop(.7, trong suốt), đến (rgba(0,0,0,0.1))); ) #ex5 img:hover ( opacity: 1; /*Reflection*/ -webkit-box-reflect: dưới 0px -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, from(trong suốt), color-stop(.7, trong suốt), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); bóng hộp: 0px 0px 20px rgba(255,255,255,0.8); )

Phần kết luận

Năm hiệu ứng được hiển thị chỉ là một ví dụ nhỏ những gì bạn có thể làm với CSS. Đừng ngại thử nghiệm. Kết hợp với nhau yếu tố đơn giản bạn có thể nhận được kết quả ấn tượng.

Rất thường xuyên trên các trang web, bạn có thể gặp các thay đổi hoặc nút khi di chuột. Một pseudo-class:hover đặc biệt trong CSS cho phép bạn thực hiện tác vụ. Hôm nay, chúng ta sẽ xem xét một số kỹ thuật cho phép chúng ta thực hiện thủ thuật này và dưới đây chúng tôi sẽ công bố danh sách những kỹ thuật thú vị nhất trong số đó (với mô tả/giải thích ngắn gọn). Chúng tôi sẽ chia tất cả các lựa chọn thành:

Những nhóm này rất độc đoán, bởi vì nhiều ví dụ trùng lặp và mang tính phổ quát, nghĩa là chúng có thể được tìm thấy khi thiết kế các đối tượng khác nhau.

Hiệu ứng di chuột Kiểu CSSđược thêm vào bên phải của phần tử như thế này:

a: di chuột ( màu : đỏ ; )

a:di chuột (màu: đỏ; )

Thông thường, cơ chế này được sử dụng riêng cho các liên kết nhằm thay đổi màu sắc của chúng hoặc thêm/xóa phần gạch chân. Tuy nhiên, nó cũng có thể được chỉ định cho các khối, nút, văn bản khác hoặc được sử dụng khi tạo.

nút : di chuột ( nền : rgba (0 , 0 , 0 , 0 ) ; màu : đỏ ; .my-picture : di chuột ( độ mờ : 0,5 ; bộ lọc : alpha(opacity= 50 ) ; )

nút:hover ( nền: rgba(0,0,0,0); màu: đỏ; ) .my-picture:hover ( opacity: 0.5; filter: alpha(opacity=50); )

Các trình duyệt hiện đại nhận biết chính xác hiệu ứng di chuột CSS khi di chuột, mặc dù trong các phiên bản IE 6 cũ hơn trở xuống, hiệu ứng này chỉ hoạt động đối với các liên kết. Ngoài ra, một số nguồn tin cho rằng điều này phải được chỉ định trong mã.

Nhân tiện, khi cài đặt kiểu liên kết, bộ chọn cũng có thể được sử dụng bổ sung: liên kết - cho các trang chưa được truy cập, :visited - đối với những trang bạn đã đến + :active xác định địa chỉ hiện đang hoạt động. Điều quan trọng là đặt hiệu ứng di chuột trong CSS sau :link và :visited nếu chúng tồn tại.

Hãy chuyển từ lý thuyết sang thực hành. Dưới đây là danh sách vật liệu hữu ích và đoạn trích - hãy nhấp vào các liên kết để xem nguồn.

Hiệu ứng di chuột cho các nút và liên kết

Như chúng tôi đã nói ở trên, đây là danh mục đối tượng phổ biến nhất trên trang web nơi tìm thấy kỹ thuật này. Dưới đây là một số lựa chọn về chủ đề này.

Ví dụ đơn giản về nút

Nút Sullivan

Bí quyết là khi bạn di chuột qua các nút khác nhau Ngoài việc thay đổi màu nền, một hình ảnh động nhỏ với các biểu tượng (mỗi biểu tượng đều có biểu tượng riêng) cũng được tung ra.

Biểu tượng CSS trên Hover

Lựa chọn 5 tùy chọn đơn giản việc thực hiện nhiệm vụ. Trong mọi trường hợp, các biểu tượng bổ sung sẽ được sử dụng xuất hiện ở bên phải/trái của văn bản hoặc thay thế nó.

Hiệu ứng di chuột vào nút

So với ví dụ trước, 12 hàm kích hoạt này trông thú vị hơn nhiều: cả về mặt hình ảnh lẫn mã. Không phải không có JS.

Di chuột điều hướng

Một số tính năng cho phép bạn làm điều gì đó khác thường hơn với thuộc tính trang trí văn bản cơ bản. Nền của nút cũng có nhiều hiệu ứng hình ảnh khác nhau.

Thông tin về di chuột

Chức năng chú giải công cụ hiện được hỗ trợ trong tất cả các trình duyệt nhưng bạn có thể tùy chỉnh nó cho phù hợp với nhu cầu của mình. Trong ví dụ hiện tại, lớp giả được kích hoạt cho thẻ dfn, trông rất phong cách. Code khá nhỏ gọn HTML + CSS.

Nút năng lượng

Một trong những điều nhất tùy chọn ban đầu hiệu ứng di chuột theo khối - khi di chuột, nó giống như đổ đầy chất lỏng vào khối. Việc triển khai sử dụng CSS, HTML và SVG. Đối với một số chủ đề trang web nhất định, đoạn trích này chắc chắn sẽ là một ơn trời.

Hiệu ứng di chuột cho hình ảnh

15 kỹ thuật cơ bản

Mặc dù bài viết đã được xuất bản khá lâu nhưng các phương pháp vẫn hoạt động chính xác. Ở đây, có lẽ, tất cả các phép biến đổi tiêu chuẩn có thể có cho đồ họa đều được thu thập: một số loại thu phóng, xoay, làm mờ, đen trắng, độ trong suốt, bộ lọc, độ sáng, v.v.

Hình ảnh hiệu ứng di chuột đẹp mắt

Tuyển chọn 30 hành động thú vị và mượt mà khi di chuột qua một bức ảnh. Do các thao tác trực quan đơn giản dưới dạng thu phóng và thêm đường, một ấn tượng phức tạp tốt sẽ được tạo ra. Ở một số nơi, tiêu đề được phóng to và mô tả ngắn gọn hơn. Lựa chọn tuyệt vời cho một danh mục đầu tư.

Hoạt hình di chuột của Barberpole

Hoạt hình thoạt nhìn không phức tạp, nhưng cuối cùng nó trông rất ngầu và khác thường.

Hiệu ứng di chuột CSS với tính năng phát hiện hướng

Bạn có thể tìm thấy tuyển tập các đoạn trích và mã tuyệt vời về chủ đề này trong bài viết từ css-tricks.com. Tất cả các ví dụ này được thống nhất bởi thực tế là trong quá trình hoạt động, vị trí và hướng di chuyển của con trỏ được xác định. Ngược lại, điều này cho phép bạn tạo các phản ứng khá độc đáo khi di chuột qua các thành phần trang:

Trong nhiều khó khăn Giải pháp Javascript và jQuery cho các hiệu ứng di chuột cho phép bạn đa dạng hóa và cải thiện kết quả một cách đáng kể.

Hướng Aware Hover Goodness

Ô nhận biết hướng sử dụng CSS thuần đường dẫn clip

Tìm phần còn lại của các thủ thuật trong bài viết gốc.

Hoạt hình

Sự phát triển này bao gồm hơn 100 những cách đơn giản“hoạt hình” của hình ảnh hoặc đồ vật khi di chuột. Với những chức năng này bạn có thể thực hiện ngoại hình khác nhau nút, tiêu đề, văn bản, biểu tượng xã hội, v.v. Có các tùy chọn thay đổi cách hiển thị hình ảnh và lớp phủ nền mờ.

Link chứa 7 hiệu ứng tiêu đề khi di chuột CSS3 - khi di chuột qua hình ảnh người dùng sẽ thấy khối thông tin với tiêu đề, mô tả ngắn và liên kết để theo dõi. Điều này không có nghĩa là các ví dụ này rất độc đáo nhưng chúng chắc chắn sẽ giúp đa dạng hóa dự án nội dung tĩnh.

Thư viện di chuột CSS

Di chuột.css

Dự án có tên đơn giản là Hover.css, chứa một tập hợp các hiệu ứng CSS3 cho các liên kết, nút, khối, v.v. Bạn có thể sử dụng mã được tạo sẵn và/hoặc thêm các sửa đổi của riêng bạn vào đó. Có rất nhiều thứ thú vị ở đây: chuyển đổi 2D/3D, làm việc với nền và khung, bóng, biểu tượng. Giải pháp có sẵn ở các định dạng CSS, LESS và Sass.

Imagehover.css

Một thư viện khác thiết lập hiệu ứng di chuột hình ảnh - trong phiên bản miễn phí bạn sẽ tìm thấy 44 tùy chọn chuyển đổi (bộ cao cấp chứa nhiều hơn 5 lần). LESS và SCSS cũng được hỗ trợ ở đây, file này chỉ nặng 19kb. Trang web có một trang trình bày tất cả các ví dụ hoạt động. Có rất nhiều thứ được cung cấp chip độc đáo, chưa được đề cập ở trên.

Có hơn 30 trong dự án kỹ thuật khác nhau cho các vật tròn và vuông. Tất cả chúng đều khá nguyên bản, thực tế không có hành động “một phần tử” đơn giản nào dưới dạng phóng to/thu nhỏ thông thường. Tác vụ được triển khai bằng cách sử dụng CSS3 + HTML thuần túy (bao gồm cả tệp Scss). Khả năng tương thích tuyệt vời với Bootstrap 3, có sẵn tài liệu.

Tổng cộng. Chúng tôi hy vọng những điều này di chuột qua css hiệu ứng khi di chuột qua hình ảnh, khối, liên kết và các thành phần trang khác đã giúp bạn hiểu chủ đề này. Theo ý kiến của bạn, bạn có thể triển khai các giải pháp thành công nhất trên trang web của mình - có thể là kết nối một thư viện chính thức hoặc chỉ đơn giản là tích hợp lựa chọn nhỏ mã số.

Nếu bạn biết thêm nữa tính năng thú vị và đoạn trích, hãy gửi URL cho họ trong phần nhận xét. Và chúng tôi sẽ bổ sung thêm vào bài viết trong thời gian tới.

Trước hết, đối với những người chưa hiểu rõ hoặc chưa hiểu rõ về chủ đề này, tôi sẽ giải thích ngắn gọn hiệu ứng di chuột là gì. Cái này các loại khác nhau hiệu ứng (chú thích bật lên, chú giải công cụ, chuyển tiếp suôn sẻ, chuyển đổi, xoay, phóng to, dịch chuyển, v.v.) được áp dụng cho các thành phần trang web khi di chuột qua chúng. Những hiệu ứng này có thể được triển khai bằng nhiều plugin jQuery hoặc CSS3 thuần túy.
Hôm nay tôi đã chuẩn bị nhiều lựa chọn hiệu ứng di chuột ban đầu cho hình ảnh được tạo bằng CSS3 mà không cần kết nối thư viện javascript. Tôi sẽ không nói về những ưu điểm và nhược điểm của việc triển khai hiệu ứng di chuột trong CSS3 thuần túy, đó là một chủ đề khác, chỉ cần xem các ví dụ và nếu cần, hãy sử dụng ví dụ bạn thích trên trang web của mình. Tất cả các hiệu ứng được trình bày trong bài đánh giá đều được cung cấp ví dụ demo và tài liệu chi tiết kèm theo mã nguồn. Các hướng dẫn sử dụng chủ yếu bằng ngôn ngữ tư sản, nhưng mọi thứ ít nhiều đều trực quan.

Tôi muốn bạn chú ý ngay đến thực tế là tất cả các ví dụ này sẽ chỉ hoạt động chính xác trong các trình duyệt hiện đại hỗ trợ thuộc tính CSS3.

Để không làm hỏng bức tranh tổng thể, tôi không làm sai lệch tên của các hiệu ứng bằng bản dịch máy (ngoại trừ một số hiệu ứng), tôi để nguyên tên gốc như nhà phát triển đã gọi.

Một hiệu ứng rất thú vị khi di chuột qua hình thu nhỏ của hình ảnh bằng cách sử dụng nếp nhăn trong thiết kế và kiểu chữ. Một số loại hiệu ứng khác nhau để xuất hiện chú thích hình ảnh, chuyển đổi 3D mềm mại và không xâm phạm cũng như chuyển tiếp mượt mà các phần tử giả. Chỉ hoạt động trong các trình duyệt hiện đại.

iHover là một bộ sưu tập ấn tượng các hiệu ứng di chuột CSS3 thuần túy, với Hỗ trợ khởi động 3. Được xây dựng trên Scss CSS (tệp), dễ dàng sửa đổi bằng các biến. Mã này có tính mô-đun, không cần phải bao gồm toàn bộ tệp. Hơn 30 hiệu ứng khác nhau trong một gói. Mọi thứ đều được ghi lại khá đầy đủ và các hiệu ứng rất dễ sử dụng. Tất cả những gì bạn cần làm là xây dựng đánh dấu HTML một cách chính xác và đưa tệp CSS vào tác phẩm của mình.

Tạo một số hiệu ứng di chuột đơn giản nhưng đầy phong cách cho chú thích hình ảnh. Ý tưởng là di chuột qua các hình thu nhỏ để hiển thị tiêu đề, tên tác giả và nút liên hệ. Đối với một số hiệu ứng, chuyển đổi hình ảnh 3D được sử dụng.

Một hiệu ứng chuyển tiếp rất đơn giản, không có bất kỳ chuông và còi đặc biệt nào, hoàn toàn hình ảnh tròn trong một khung, biến đổi bằng cách thay đổi tiêu điểm khi di chuột và thế là xong.

Hiệu ứng di chuột cho hình thu nhỏ bằng CSS3

Nhà phát triển định vị tác phẩm của mình như một ví dụ về thư viện hình ảnh với các hiệu ứng chuyển tiếp khi chú thích (chú thích) xuất hiện trên hình thu nhỏ. Tuyên bố ủng hộ tự tin trình duyệt hiện đại, bao gồm cả IE 9+. Tất nhiên, thật khó để gọi nó là một phòng trưng bày đầy đủ, nhưng hiệu ứng xuất hiện của chữ ký khá thú vị.

Một bộ quy tắc CSS khác để tạo hiệu ứng chuyển đổi ấn tượng khi di chuột qua các hình thu nhỏ có hình tròn hoàn hảo. Gói này chứa 7 loại chuyển tiếp CSS3, tài liệu rất chi tiết về cấu hình và cách sử dụng. Các hiệu ứng được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Xoay hình thu nhỏ khi di chuột

Một hiệu ứng đơn giản là xoay các hình thu nhỏ tròn khi bạn di con trỏ chuột lên chúng, giống như hiệu ứng bạn có thể thấy trên blog của tôi, trong phần thông báo về bài đăng trên trang chính. Được triển khai với một vài dòng mã css.

Dịch theo nghĩa đen: “Hiệu ứng gợi cảm khi di chuột qua hình ảnh”. Tất nhiên, bạn khó có thể nhận thấy bất cứ điều gì quá gợi cảm trong hiệu ứng này, trừ khi bạn có trí tưởng tượng phong phú, nhưng hiệu ứng này rất thú vị theo cách riêng của nó và đáng được chú ý.

Năm hiệu ứng khác nhau cho hình ảnh khi bạn di chuột qua chúng. Chữ ký bật lên có ba biến thể, rèm ở dạng thay đổi mức độ trong suốt và xoay theo chuyển động ngang.

4 loại hiệu ứng hoạt hình cho chú thích hình ảnh, được triển khai độc quyền bằng CSS3. Các vị trí khác nhau khi xuất hiện và hiệu ứng chuyển tiếp, thiết kế khá chuẩn. Để hiểu cách hoạt động của hoạt hình, hãy xem nguồn Tôi không tìm thấy bất kỳ trang demo hoặc tài liệu riêng biệt nào.

Các phòng trưng bày thu nhỏ được sắp xếp theo dạng lưới với nhiều hiệu ứng khác nhau để xuất hiện chữ ký, xoay, phát triển, cửa sổ bật lên, v.v. Tài liệu hướng dẫn sử dụng và cấu hình khá thưa thớt nhưng nếu thực sự muốn bạn có thể tìm hiểu.

Hiệu ứng này không có gì đặc biệt, một sự thay đổi tầm thường về độ sáng của hình ảnh khi di chuột, ngoại trừ các yếu tố hoạt hình đã được thêm vào. Bạn sẽ phải tự mình tìm ra các chi tiết triển khai bằng cách đặt ra mã nguồn của bản demo.

Một bộ 10 hiệu ứng di chuột khác cho hình ảnh, nhiều sửa đổi khác nhau cho hình thu nhỏ khi di chuột, phóng to, xoay, xoay, làm tối, v.v.

Hiệu ứng hoạt hình viền

Nhiều hiệu ứng hoạt hình khung hình xung quanh hình ảnh trông khá hấp dẫn, có hướng dẫn chi tiết cách thiết lập và sử dụng.

Hiệu ứng di chuột CSS3 gốc được sử dụng để hiển thị hiệu quả chú thích hình thu nhỏ của hình ảnh khi di chuột. Bộ quy tắc CSS bao gồm 10 hiệu ứng khác nhau mà bạn có thể sử dụng riêng lẻ để hình ảnh khác nhau. Các hiệu ứng thực sự ấn tượng, đặc biệt là khi tất cả được thực hiện bằng CSS3. Hướng dẫn chi tiết, sẽ giúp bạn tìm ra cái gì.

Ý tưởng là tạo một SVG làm hình nền cho một số văn bản và biến thành hình dạng khác khi di chuột qua. Bằng cách này, bạn có thể thực hiện nhiều tùy chọn khác nhau; trong ví dụ này, ba loại hiệu ứng chuyển tiếp được hiển thị. Phẩm giá sử dụng SVG là chúng ta có thể thay đổi kích thước khuôn theo kích thước vùng chứa gốc.

Hình ảnh trượt

Bản chất của hiệu ứng này là hình ảnh di chuyển lên xuống để làm xuất hiện chú thích. Nếu bạn làm việc với các tham số kiểu, tôi nghĩ bạn có thể đạt được một số hiệu ứng khá đẹp, nhưng theo mặc định, mọi thứ trông rất đơn giản.

Với hiệu ứng này, mọi thứ đều đơn giản, chú thích cho ảnh trượt ra ở phía trên bên phải hoặc phía dưới bên trái, dưới dạng dải băng có lớp mờ nền tối, mọi thứ được định dạng lại rất đơn giản bằng cách sử dụng thuộc tính css.

Một giải pháp thú vị: các hình thu nhỏ được trình bày ở dạng tối; khi bạn di chuột qua chúng, hình ảnh sẽ xuất hiện và chữ ký hiện lên trên nền sáng.

Chú thích cho hình ảnh xuất hiện từ góc và mở rộng theo đường chéo trên toàn bộ khu vực của hình ảnh.

Một số giải pháp thú vị hơn để triển khai chú thích bật lên cho hình thu nhỏ của hình ảnh. Trong trình chỉnh sửa trực tuyến, bạn có thể thử nghiệm các thông số và đạt được kết quả ấn tượng hơn.

Bộ dụng cụ hiệu ứng đẹp khi di chuột qua hình thu nhỏ, nhiều kiểu dáng và thiết kế chú thích cho ảnh sẽ xuất hiện. Các đường kẻ mỏng tương phản với nền hơi tối tạo nên các khối thông tin dễ đọc.

Hình dạng kỳ lạ và hiệu ứng phóng đại kết hợp với hiệu ứng hoạt hình sự xuất hiện của chú thích cho hình thu nhỏ của hình ảnh.

Hiệu ứng tuyệt vời của việc phủ các biểu tượng lên hình thu nhỏ của hình ảnh với nhiều kiểu dáng khác nhau. Ví dụ sử dụng ký hiệu (+) được viền trong một vòng tròn có sử dụng bán kính đường viền: trong CSS, bạn cũng có thể sử dụng phông chữ biểu tượng để làm cho bảng bật lên có nhiều thông tin hơn.

6 chú thích cho hình ảnh

6 Tùy chọn hiển thị chú thích hình ảnh bật lên khi di chuột bằng CSS3. Bài học chi tiết về việc triển khai và cấu hình, các nguồn có sẵn để tải xuống.

Cách tạo một số hiệu ứng di chuột chú thích tinh tế và hiện đại.

Tìm hiểu cách tạo một số hiệu ứng di chuột đơn giản nhưng đầy phong cách cho chú thích hình ảnh. Ý tưởng là có một lưới các số liệu và áp dụng hiệu ứng di chuột vào các mục sẽ hiển thị chú thích với tiêu đề, tác giả và nút liên kết.

Hiệu ứng di chuột CSS3 nhận biết hướng với jQuery

Tạo hiệu ứng di chuột nhận biết hướng bằng CSS3 và jQuery.

Tìm hiểu cách tạo hiệu ứng di chuột nhận biết hướng bằng cách sử dụng một số tính năng tốt của CSS3 và jQuery. Ý tưởng là có một lớp phủ nhỏ trượt lên trên một số hình thu nhỏ theo hướng mà chúng ta đang sử dụng chuột.

Hiệu ứng di chuột vòng tròn với chuyển tiếp CSS

Hướng dẫn cách tạo các hiệu ứng di chuột khác nhau trên vòng tròn bằng chuyển tiếp CSS và xoay 3D

Bộ nút CSS này bao gồm một số kiểu và hiệu ứng đơn giản, sáng tạo và tinh tế để truyền cảm hứng cho bạn. Các hiệu ứng có thể được nhìn thấy khi di chuột vào một số nút và nhấp vào các nút khác. Hầu hết các chuyển tiếp CSS đều được sử dụng nhưng cũng có cả hoạt ảnh CSS va cho một số nút sử dụng một chút JavaScript để thêm/xóa các lớp hiệu ứng.

Hiệu ứng di chuột biểu tượng

Một tập hợp các hiệu ứng di chuột biểu tượng tròn đơn giản với các hiệu ứng chuyển tiếp và hoạt ảnh CSS mang lại cảm hứng cho bạn.

Đây là bộ sưu tập các hiệu ứng di chuột biểu tượng đơn giản. Tạo hiệu ứng tinh tế và phong cách bằng cách sử dụng các hiệu ứng chuyển tiếp và hoạt ảnh CSS trên các điểm neo và các phần tử giả của chúng.

Trước hết, đối với những người chưa hoàn toàn hiểu về chủ đề này hoặc chưa hiểu rõ về chủ đề này, tôi sẽ giải thích ngắn gọn nó là gì. Đây là nhiều loại hiệu ứng khác nhau (chú thích bật lên, chú giải công cụ, chuyển tiếp mượt mà, chuyển đổi, xoay, phóng to, dịch chuyển, v.v.) được áp dụng cho các thành phần trang web trên chúng bằng con trỏ chuột. Chúng có thể được triển khai bằng cách sử dụng các plugin jQuery khác nhau hoặc ở dạng .
Hôm nay tôi đã chuẩn bị nhiều lựa chọn hiệu ứng di chuột ban đầu cho hình ảnh được tạo bằng CSS3 mà không cần kết nối thư viện javascript. Tôi sẽ không nói về những ưu điểm và nhược điểm của việc triển khai hiệu ứng di chuột trong CSS3 thuần túy, đó là một chủ đề khác, chỉ cần xem các ví dụ và nếu cần, hãy sử dụng ví dụ bạn thích trên trang web của mình. Tất cả các hiệu ứng được trình bày trong bài đánh giá đều được cung cấp ví dụ demo và tài liệu chi tiết kèm theo mã nguồn. Các hướng dẫn sử dụng chủ yếu bằng ngôn ngữ tư sản, nhưng mọi thứ ít nhiều đều trực quan.

Tôi muốn bạn chú ý ngay đến thực tế là tất cả các ví dụ này sẽ chỉ hoạt động chính xác trong các trình duyệt hiện đại hỗ trợ thuộc tính CSS3.

Một hiệu ứng rất thú vị khi di chuột qua hình ảnh thu nhỏ, sử dụng các đường nét tinh xảo trong thiết kế và kiểu chữ. Một số loại hiệu ứng khác nhau để xuất hiện chú thích hình ảnh, chuyển đổi 3D mềm mại và không xâm phạm cũng như chuyển tiếp mượt mà các phần tử giả. Chỉ hoạt động trong các trình duyệt hiện đại.

iHover là một bộ sưu tập ấn tượng gồm các hiệu ứng di chuột CSS3 thuần túy, có hỗ trợ Bootstrap 3. Được xây dựng trên Scss CSS (tệp), dễ dàng sửa đổi bằng các biến. Mã này có tính mô-đun, không cần phải bao gồm toàn bộ tệp. Hơn 30 hiệu ứng khác nhau trong một gói. Mọi thứ đều được ghi lại khá đầy đủ và các hiệu ứng rất dễ sử dụng. Tất cả những gì bạn cần làm là xây dựng đánh dấu HTML một cách chính xác và đưa tệp CSS vào tác phẩm của mình.

Một hiệu ứng chuyển tiếp rất đơn giản, không có chuông và còi đặc biệt, một hình ảnh tròn hoàn toàn trong một khung hình, biến đổi bằng cách thay đổi tiêu điểm khi di chuột và thế là xong.

Hiệu ứng di chuột cho hình thu nhỏ bằng CSS3

Nhà phát triển định vị tác phẩm của mình như một ví dụ về thư viện hình ảnh với các hiệu ứng chuyển tiếp khi chú thích (chú thích) xuất hiện trên hình thu nhỏ. Sự hỗ trợ tự tin của các trình duyệt hiện đại, bao gồm IE 9+, được tuyên bố. Tất nhiên, thật khó để gọi nó là một phòng trưng bày đầy đủ, nhưng hiệu ứng xuất hiện của chữ ký khá thú vị.

Xoay hình thu nhỏ khi di chuột

Dịch theo nghĩa đen: "Hiệu ứng tình dục khi di chuột qua". Tất nhiên, bạn khó có thể nhận thấy bất cứ điều gì quá gợi cảm trong hiệu ứng này, trừ khi bạn có trí tưởng tượng phong phú, nhưng hiệu ứng này rất thú vị theo cách riêng của nó và đáng được chú ý.

4 loại hiệu ứng hoạt hình cho chú thích hình ảnh, được triển khai độc quyền bằng CSS3. Các vị trí khác nhau khi xuất hiện và hiệu ứng chuyển tiếp, thiết kế khá chuẩn. Để hiểu cách hoạt động của hoạt ảnh, hãy xem mã nguồn của trang demo; Tôi không tìm thấy bất kỳ tài liệu riêng biệt nào.

Một bộ 10 hiệu ứng di chuột khác cho hình ảnh, nhiều sửa đổi khác nhau cho hình thu nhỏ khi di chuột, phóng to, xoay, xoay, làm tối, v.v.

Nhiều hiệu ứng hoạt hình khung hình xung quanh hình ảnh trông khá hấp dẫn, có hướng dẫn chi tiết cách thiết lập và sử dụng.

Hiệu ứng di chuột CSS3 gốc được sử dụng để hiển thị hiệu quả chú thích hình thu nhỏ của hình ảnh khi di chuột. Bộ quy tắc CSS bao gồm 10 hiệu ứng khác nhau mà bạn có thể sử dụng riêng cho các hình ảnh khác nhau. Các hiệu ứng thực sự ấn tượng, đặc biệt là khi tất cả được thực hiện bằng CSS3. Hướng dẫn chi tiết sẽ giúp bạn tìm ra cái gì.

Ý tưởng là tạo một SVG làm hình nền cho một số văn bản và biến thành hình dạng khác khi di chuột qua. Bằng cách này, bạn có thể thực hiện nhiều tùy chọn khác nhau; trong ví dụ này, ba loại hiệu ứng chuyển tiếp được hiển thị. Ưu điểm của việc sử dụng SVG là chúng ta có thể thay đổi kích thước biểu mẫu để vừa với kích thước của vùng chứa chính.

Hình ảnh trượt

Với hiệu ứng này, mọi thứ đều đơn giản, chú thích cho hình ảnh trượt ra ở trên cùng bên phải hoặc dưới cùng bên trái, dưới dạng dải băng có nền tối mờ, mọi thứ đều được định dạng lại rất đơn giản bằng thuộc tính css.

Một giải pháp thú vị: các hình thu nhỏ được trình bày ở dạng tối; khi bạn di chuột qua chúng, hình ảnh sẽ xuất hiện và chữ ký hiện lên trên nền sáng.

Chú thích cho hình ảnh xuất hiện từ góc và mở rộng theo đường chéo trên toàn bộ khu vực của hình ảnh.

Bộ hiệu ứng đẹp mắt khi di chuột qua hình thu nhỏ, nhiều kiểu dáng và thiết kế chú thích cho ảnh. Các đường kẻ mỏng tương phản với nền hơi tối tạo nên các khối thông tin dễ đọc.

Hình dạng kỳ lạ và hiệu ứng phóng to kết hợp với hiệu ứng hoạt hình xuất hiện chú thích cho hình thu nhỏ của hình ảnh.

Hiệu ứng tuyệt vời của việc phủ các biểu tượng lên hình thu nhỏ của hình ảnh với nhiều kiểu dáng khác nhau. Ví dụ này sử dụng ký hiệu (+) được viền trong một vòng tròn sử dụng bán kính đường viền: trong CSS, bạn cũng có thể sử dụng phông chữ biểu tượng để làm cho bảng bật lên có nhiều thông tin hơn.

Một ví dụ về tạo hiệu ứng slide trực quan để hiển thị chú thích 3D cho hình ảnh chỉ bằng CSS3 và HTML5.

6 chú thích cho hình ảnh

6 Tùy chọn hiển thị chú thích hình ảnh bật lên khi di chuột bằng CSS3. Bài học chi tiết về cách triển khai và cấu hình, các nguồn có sẵn để tải xuống.

Và cuối cùng, không thể không nhắc tới cách đơn giản nhất để tạo pop-up caption cho hình thu nhỏ bằng CSS3.

Tôi đã nói về phương pháp này trong một trong những bài học trước đây của tôi:.

Với tất cả sự tôn trọng, Andrew