Cách Thêm Hiệu Ứng Bóng Lướt Cho Logo Blogger


Một chút hiệu ứng bóng lướt qua trên logo sẽ làm cho thanh menu của Blog trở nên sống động. Đặc biệt là đối với những Blog sử dụng logo bằng chữ. Hiệu ứng bóng trên logo phù hợp với các Blog có logo nhiều màu sắc, và nền thanh menu là màu trắng. Bạn chỉ cần thử logo của mình, biết đâu sẽ đẹp hơn ban đầu ^.^

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


Sau đó chúng ta copy đoạn code bên dưới chèn trước ]]></b:skin>
#Header1{
position:relative
}
#Header1:before,#Header1:after{content:"";
position:absolute;
top:50%;width:3%;
height:100%;
transform:translateY(-50%);
background:rgba(255,255,255,.75);
z-index:999999999
}
#Header1:before{left:155%;animation:light-left 1.8s infinite alternate linear}
#Header1:after{right:-55%;animation:light-right 3.0s infinite alternate linear}
@keyframes 
light-left{0%{left:85%;opacity:0}50%{left:40%;opacity:1}100%{left:50%;opacity:0}}
@keyframes 
light-right{0%{right:80%;opacity:0}50%{right:100%;opacity:1}100%{right:0%;opacity:0}}

Các bạn thay Header1 thành phần tử CSS mà bạn đã xác định ban đầu. Sau đó lưu lại và tận hưởng kết quả.

NOTE: Bài viết này hữu ích với bạn chứ? Đừng quên đánh giá bài viết và chia sẻ cho bạn bè và người thân của bạn nhé !

Copyright © ReLub.Net

ReLub.Net

youtube google facebook Đôi khi cuộc sống không được như ý muốn của ta, bạn hãy cứ cho đi. Cho đi là cách bạn đã tự yêu thương lấy chính bản thân mình.

3
Nhận xét

➥ 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

Chúc mừng năm mới Chúc mừng năm mới