 |
| 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 |
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é.