• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

Hiệu ứng hình ảnh cuộn qua CSS – Thay đổi hình ảnh khi di chuột

admin by admin
Tháng Ba 24, 2022
Home Blogspot

Hình ảnh di chuột qua là một tính năng thiết kế trong đó hình ảnh thay đổi khi con chuột của bạn di chuột qua nó. Hãy nghĩ đến một bóng đèn bật và tắt khi bạn di chuyển con trỏ chuột vào khu vực đó của trang. Khi một trang đang tải, hình ảnh cuộn qua được tải trước vào đó để đảm bảo rằng hiệu ứng cuộn qua được hiển thị nhanh chóng.

Điều này từng được triển khai bằng JavaScript, khá dễ dàng chỉ với một lượng nhỏ tập lệnh. Để làm cho hình ảnh cuộn qua hoạt động, các thuộc tính onmouseover và onmouseout được sử dụng cho một thẻ liên kết. Sau đó, mã được thêm vào một tiện ích blog hoặc vào một bài đăng mới. Tuy nhiên, nó được chứng minh là có một số nhược điểm, đó là lý do tại sao nhiều nhà phát triển web đang sử dụng phương pháp chỉ CSS.

hình ảnh cuộn qua css

Nội dung

  • Cách tạo hình ảnh cuộn qua bằng CSS
      • Bức hình
      • Tạo phần tử neo HTML cho hình ảnh của chúng tôi
      • Sử dụng CSS để đặt hình nền
      • Kết quả
    • Thêm hình ảnh di chuột qua Blogger
    • Bài viết liên quan:

Cách tạo hình ảnh cuộn qua bằng CSS

Đây là cách triển khai hình ảnh cuộn qua bằng cách sử dụng CSS. Trước khi bắt đầu, chúng ta cần chuẩn bị sẵn hai hình ảnh, một hình ở trạng thái ban đầu / tĩnh cũng như trạng thái cuộn qua của nó.

Bức hình

Đặt cả tĩnh và hình ảnh cuộn qua trong một tệp và đảm bảo rằng hình ảnh cuộn qua được đặt trên đầu tệp tĩnh. Để đạt được hiệu ứng cuộn qua, chúng tôi sẽ viết mã để hiển thị hình ảnh tĩnh và cắt hình ảnh di chuột, để chỉ một trạng thái hình ảnh được hiển thị tại một thời điểm.

Đối với hướng dẫn này, chúng tôi sẽ sử dụng phần sau làm hình ảnh cuộn qua CSS.

hình ảnh cuộn qua html

Tạo phần tử neo HTML cho hình ảnh của chúng tôi

Thay vì thêm tệp hình ảnh vào thẻ, chúng tôi sẽ hiển thị tệp đó dưới dạng hình nền của thẻ (neo). Đây là HTML mà chúng tôi cần thêm:

#URL“> Hình ảnh di chuột qua

Lưu ý: nếu bạn muốn làm cho hình ảnh có thể nhấp được, hãy thay thế #URL với url của trang web mà bạn muốn liên kết trỏ đến.

Sử dụng CSS để đặt hình nền

Để tạo hiệu ứng hình ảnh di chuột qua, chúng ta sẽ sử dụng lớp giả CSS: hover. Sau đó, chúng ta sẽ sử dụng thuộc tính background-position và đặt các giá trị thành 0 0 để di chuyển hình nền sang góc trên bên trái, điều này sẽ tạo ra hiệu ứng cuộn qua.

Lưu ý: Thay thế văn bản màu xanh lam bằng url của tệp hình ảnh của bạn. Hãy chú ý đến các giá trị chiều rộng và chiều cao được đánh dấu màu đỏ, các giá trị này sẽ khác nhau tùy thuộc vào tệp của bạn, trong đó giá trị chiều cao chỉ dành cho một hình ảnh chứ không phải toàn bộ tệp hình ảnh!

Kết quả

Di con trỏ chuột qua bóng đèn để xem hiệu ứng hình ảnh cuộn qua đang hoạt động:

Hình ảnh cuộn qua

Thêm hình ảnh di chuột qua Blogger

Để thêm hình ảnh cuộn qua làm tiện ích: sao chép cả mã HTML / CSS và đi tới ‘Bố cục’> nhấp vào liên kết ‘Thêm tiện ích’> chọn HTML / JavaScript, sau đó dán mã vào hộp ‘Nội dung’.

Hoặc, nếu bạn muốn thêm nó vào bên trong một trong các bài đăng của mình, khi bạn tạo Bài đăng mới, hãy chuyển sang HTML và dán các mã bên trong hộp nội dung.

Và đây là cách bạn thực hiện hoán đổi hình ảnh khi di chuột qua CSS. Vui thích!










Đánh giá bài viết
[Total: 0 Average: 0]

Bài viết liên quan:

  1. How to Create a Blogger Account?
  2. Customizable Related Posts Widget for Blogger
  3. Thêm tải thêm bài đăng hoặc cuộn vô hạn vào Blogger
  4. Cách thêm quảng cáo cấp trang AdSense trong Blogspot
  5. How to Add Font Awesome Social Icons in Blogger
Tags: blogspotmẹo bloggermẹo blogspotthủ thuật blogspot
admin

admin

Next Post
Cách tạo Trang chủ tĩnh trong Blogger

Cách tạo Trang chủ tĩnh trong Blogger

Tự động chia sẻ bài đăng trên Blogger lên Facebook bằng IFTTT

Tự động chia sẻ bài đăng trên Blogger lên Facebook bằng IFTTT

Cách ẩn bài đăng khỏi trang chủ Blogger

Cách ẩn bài đăng khỏi trang chủ Blogger

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

M3p là ai? Làm nghề gì?

Quỷ Satan Là Ai? Sức Mạnh Của Quỷ Satan Là Gì?

Satan là ai? 4 câu truyện đáng sợ liên quan đến Satan

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply