31 C
Hanoi
Chủ Nhật, Tháng Sáu 16, 2024
spot_img

Hướng dẫn tạo hiệu ứng bóng lướt qua cho logo Website

Truy cập:

Chia sẻ:

Chào mừng bạn đến với hướng dẫn chi tiết về cách thực hiện một hiệu ứng bóng độc đáo và ấn tượng cho logo trên trang web của bạn. Hiệu ứng bóng lướt qua không chỉ tạo điểm nhấn thú vị mà còn làm cho trang web của bạn trở nên sống động và chuyên nghiệp hơn. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về đoạn mã CSS mạnh mẽ để tạo ra hiệu ứng này.

Hướng dẫn tạo hiệu ứng bóng lướt qua cho logo Website

Để xác định phần tử CSS bao bọc logo trên trang web của bạn, bạn có thể thực hiện các bước sau:

  1. Nhấp chuột phải vào logo trên trang web của bạn.
  2. Chọn “Kiểm tra” (Inspect) để mở cửa sổ xem phần tử (Elements) của trình duyệt.

Trong cửa sổ “Elements“, kiểm tra xem phần tử nào bao ngoài ảnh logo của bạn. Ví dụ, trên theme Flatsome, logo thường nằm trong cấu trúc: Header-main > Header Inner > Logo. Do đó, sau khi tìm hiểu, bạn có thể xác định được phần tử bao bọc logo là #logo. (Tuy nhiên bạn nên làm như hướng dẫn ở trên là click phải chuột vào logo rồi chọn “Kiểm tra” là chính xác nhất).

Một mẹo nhỏ là thường không phải là thẻ <img> hay <a> chính xác mà là một thẻ <div> hoặc một phần tử nằm ngay trên thẻ <a>. Điều này giúp bạn chọn đúng phần tử chính xác để áp dụng hiệu ứng bóng lướt qua cho logo của mình. Tuy nhiên cách này chỉ áp dụng cho 1 số số theme WordPress nhất định (như theme Flatsome chẳng hạn).

Hướng dẫn tạo hiệu ứng bóng lướt qua cho logo Website

Các bạn copy đoạn code CSS dưới đây và paste vào Giao diện – Tùy biến – Style – Custom CSS:

/* CSS hiệu ứng bóng lướt NGHIÊNG cho logo by congvietit.com */

/* Thay thế #logo bằng phần tử CSS của bạn */
#logo::after, #logo::before {
  transform: skewX(-25deg) translateY(-50%);
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 100%;
  background-color: white;
  z-index: 0;
}

#logo::before {
  left: 0%;
  animation: light-left 5s infinite alternate linear;
}

#logo::after {
  right: -5%;
  animation: light-right 5s infinite alternate linear;
}

@keyframes light-left {
  0% {
    left: -5%;
    opacity: 0;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  to {
    left: 105%;
    opacity: 0;
  }
}

@keyframes light-right {
  0% {
    right: -5%;
    opacity: 0;
  }
  50% {
    right: 50%;
    opacity: 1;
  }
  to {
    right: 105%;
    opacity: 0;
  }
}

Nếu bạn nào dùng theme Newspaper giống mình thì sử dụng đoạn code sau:

/* CSS hiệu ứng bóng lướt NGHIÊNG cho logo by congvietit.com */

/* Thay thế #logo bằng phần tử CSS của bạn */
.tdb-logo-img-wrap:before,
.tdb-logo-img-wrap:after {
  transform: skewX(-25deg) translateY(-50%);
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 100%;
  background-color: white;
  z-index: 0;
}

.tdb-logo-img-wrap:before,
.tdb-logo-img-wrap:after {
  animation: light-animation 6s infinite alternate linear;
}

.tdb-logo-img-wrap:before {
  left: 0%;
}

.tdb-logo-img-wrap:after {
  right: -5%;
}

/* Thêm class để chuyển đổi hướng chạy */
.tdb-logo-img-wrap.reverse:before {
  left: auto;
  right: 0%;
  animation: light-animation-reverse 6s infinite alternate linear;
}

.tdb-logo-img-wrap.reverse:after {
  left: -5%;
  right: auto;
}

@keyframes light-animation {
  0% {
    left: -5%;
    opacity: 0;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  to {
    left: 105%;
    opacity: 0;
  }
}

/* Keyframes mới cho chạy ngược lại */
@keyframes light-animation-reverse {
  0% {
    left: 105%;
    opacity: 0;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  to {
    left: -5%;
    opacity: 0;
  }
}

Tóm gọn lại, thông qua bước xác định phần tử CSS bao bọc logo trên trang web, bạn có thể dễ dàng tích hợp hiệu ứng bóng lướt qua vào logo của mình. Thực hiện các điều chỉnh về kích thước, màu sắc, độ trong suốt và tốc độ trong đoạn mã CSS giúp bạn tùy biến hiệu ứng theo ý muốn, tạo nên một giao diện trang web độc đáo và chuyên nghiệp. Chúc bạn thành công trong việc thực hiện hiệu ứng này và làm cho trang web của mình trở nên ấn tượng hơn!

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của CongVietBlog để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy CongVietBlog trên Facebook.

5 1 đánh giá
Đánh giá
Công Việt Blog
Công Việt Bloghttps://congvietit.com
Chào các bạn, mình là Công Việt, mình đến từ kênh Youtube Công Việt Blog. Blog này hiểu đơn giản mình viết những thứ mình học được, áp dụng được và cung cấp những tài nguyên mà mình sử dụng, cũng là nơi để mình lưu trữ tài nguyên. Phần "Thành viên VIP" với gói chỉ 50k để giúp mình duy trì website mà thôi, hi vọng được sự ủng hộ của các bạn.
Theo dõi
Thông báo về
guest
0 Bình luận
Inline Feedbacks
View all comments
banner quang cao hostinger-congvietblog-congvietit
ma giam gia khi mua hosting vps congvietitcom

Bài viết liên quan

4 Cách xóa các mã Shortcode không sử dụng khỏi WordPress

Shortcode — công cụ tiết kiệm thời gian tuyệt vời cho nhiều quản trị viên WordPress đang tìm...

Bài 01 – Giới thiệu về WordPress

WordPress là một hệ thống xuất bản blog viết bằng ngôn ngữ lập trình PHP và sử dụng...

Khắc phục lỗi download file Google Drive qua Woocommerce trong WordPress

Nếu bạn muốn làm site bán sản phẩm có thể Download bằng Wordpress, chắc là cũng nghĩ đến...

Code hiển thị số lượng sản phẩm đã bán cho website WordPress sử dụng Woocommerce

Với đoạn code hiển thị số lượng sản phẩm đã bán cho website Wordpress sử dụng Woocommerce này,...
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x