Hiệu ứng Animation cho logo, tiêu đề blogger chỉ với css3

 Xin chào các bạn, mình là Nguyễn Phong Blog đây. Hôm nay mình sẽ tiếp tục share Hiệu ứng Animation cho blogger nhé.

NỘI DUNG

 HIỆU ỨNG ANIMATION

Mình sẽ chia ra thành 2 bước:

Với Logo

Với Tiêu Đề

Đây là demo:

Còn đây là code:

1: Đối với sử dụng Logo

#header{
 position:relative;
        display: inline-block;
}

#header:before, #header:after {
 content:"";
 position:absolute;
 top:50%;
 width:3%;
 height:100%;
 transform:translateY(-50%);
 background:rgba(255,255,255,.75);
 z-index:999999999;
}

#header:before{left:155%;animation:light-left 1.8s infinite alternate linear}

#header: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}}

Bạn cần xác định chính xác ID hoặc class chứa hình ảnh làm logo đó.

2: Đối với sử dụng tiêu đề

#header h1 a,#header h2 a,#header h1,#header h2{
position:relative;
display:inline-block
}
#header h1 a:before,#header h2 a:before,#header h1:before,#header h2:before,#header h1 a:after,#header h2 a:after,#header h1:after,#header h2:after{
content:"";
position:absolute;
top:50%;
width:3%;
height:100%;
transform:translate(-50%);
background:rgba(255,255,255,.75);
z-index:999999999
}
#header h1 a:before,#header h2 a:before,#header h1:before,#header h2:before{
left:155%;animation:light-left 1.8s infinite alternate linear
}
#header h1 a:after,#header h2 a:after,#header h1:after,#header h2: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}
}

 Trong đó:

 Width:3%: là độ rộng vệt trắng có thể điều chỉnh

 Height:100%: là chiều cao vệt trắng có thể điều chỉnh theo phần trăm.

 Background:rgba(255,255,255,.75): là màu sắc vệt chuyển động.

 

 

Nếu thấy bài viết hữu ích thì cho mình, xin đánh giá 5☆ và chia sẻ bài viết nha.

Nếu có thắc mắc gì thì hãy comment hoặc ib cho mình nha.