Đăng ký kênh Youtube

Hướng Dẫn Thêm Hiệu Ứng Bóng Lướt Qua Cho Logo Blogger

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo Blogger
Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo Blogger

Theo sự đánh giá của Chiasevip.com, hiệu ứng bóng lướt trên logo phù hợp với các trang web có logo có màu sắc và nền thanh menu là màu trắng. Tuy nhiên, bạn có thể thử nghiệm trên logo của mình để xem liệu hiệu ứng này có phù hợp hay không. Ai biết, có thể trang web của bạn sẽ trở nên đẹp hơn và ấn tượng hơn với hiệu ứng bóng sáng lướt qua trên logo.


Các bước thêm hiệu ứng bóng lướt cho logo website

Xác định phần tử CSS xung quanh logo

Trước hết các bạn xác định phần tử CSS bao bọc logo bằng F12. Ví dụ như Blog của mình là #Header1

Xác định phần tử CSS xung quanh logo
Xác định phần tử CSS xung quanh logo

Thay thế phần tử CSS code hiệu ứng bóng lướt cho logo

Hiệu ứng bóng lướt nghiêng cho logo

<style>
/* CSS by chiasevip.com */
/* Sửa #Header1 thành phần tử CSS của bạn */
#Header1:after,#Header1:before{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}
#Header1:before{left:-5%;animation:light-left 2.5s infinite alternate linear}
#Header1:after{right:-5%;animation:light-right 2.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}}
@chiasevip
    </style>

Hiệu ứng bóng lướt nghiêng cho logo

<style>
/* CSS by chiasevip.com */
/* Sửa #Header1 thành phần tử CSS của bạn */
#Header1:before{content:"";position:absolute;width:300px;height:25px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1.5s ease-out 1s infinite;-o-animation:searchLights 1.5s ease-out 1s infinite;animation:searchLights 1.5s ease-out 1s infinite}
@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}@keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}
@chiasevipcom
  </style>

Cách thêm code hiệu ứng bóng lướt cho logo

Đối với các bạn sử dụng nền tảng Blogger:

  • Copy một trong hai đoạn code bên trên.
  • Dán đoạn code vừa copy trên thẻ </body>

Đối với các bạn sử dụng nền tảng WordPress:

  • Chèn mã vào file style.css của theme.
  • Chèn mã vào khu vực CSS tùy chỉnh của trang web WordPress.

Lưu ý: Bạn phải bỏ thẻ <style> và </style>

Kết quả của việc thực hiện các bước trên là bạn sẽ nhìn thấy hiệu ứng bóng sáng được áp dụng lên logo của trang web. Bạn có thể kiểm tra bằng cách nhìn lên logo của Chia Sẻ Vip phía trên menu.

Kết luận

Chỉ cần thực hiện một số thao tác đơn giản, bạn có thể tăng vẻ đẹp mắt và sự sang trọng của logo của mình bằng cách thêm hiệu ứng bóng lướt qua trên logo. Nếu bạn gặp khó khăn hoặc không biết cách chỉnh sửa mã CSS để thực hiện việc này, đừng ngần ngại để lại bình luận bên dưới. Chúng tôi sẽ giúp bạn miễn phí. Nếu bạn đã thành công, hãy chia sẻ với chúng tôi và khoe logo của bạn nhé.

Post a Comment

➥ Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Bạn hãy dán link ảnh vào khung bình luận và ấn xuất bản, ảnh sẽ được tự động tải lên.
➥ Bạn có thể Upload Ảnh bất kì để lấy link và dán vào khung bình luận và ấn xuất bản ảnh sẽ được tải lên.
➥ Không spam trong khung bình luận, hạn chế viết tắt.
➥Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.