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

Đánh giá của bạn về bài viết này:

Thành Trương Blog

Bắt đầu mỗi ngày với một suy nghĩ tích cực và một trái tim biết ơn

3 Nhận xét

Mới hơn Cũ hơn

Comments

×Close