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

Hiệu ứng trang trí cho logo(ảnh) hay tiêu đề(chữ) của blogspot hiện tại có rất nhiều code đã chia sẻ trên internet.

Mỗi hiệu ứng đều có có nét đẹp riêng của nó và cũng phong phú về cách sử dụng javascript hay chỉ thuần túy là css.

Dưới đây hướng dẫn các bạn cách tạo hiệu ứng animation cho logo hoặc tiêu đề của blogspot chỉ với css3 đơn giản và đẹp mắt.

Demo có thẻ xem ngay ảnh bên dưới.

Có 2 trường hợp bạn cần lưu ý đó là:
- Sử dụng hình ảnh(logo) thay cho tiêu đề.
- Sử dụng tiêu đề là chữ.
Do vậy cần chia ra 2 trường hợp để áp dụng code.
1- 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 đó, thường thì sau khi tải lên blogspot logo sẽ là thành phần của header có id (#header).
2- Sử dụng tiêu đề blogspot là chữ.

#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ể tăng giảm theo phần trăm.
- background:rgba(255,255,255,.75): là màu sắc vệt chuyển động.
Có rất nhiều mẫu blogspot nên id hoặc class cũng có thể khác nhau do người thiết kế do vậy bạn cần xác định đúng id hay class cho thành phần cần tạo hiệu ứng Animation.
3- Thêm một kiểu hiệu ứng cho logo tiêu đề blog.
Demo:

Code css:

#header {
position: relative;
}
#header:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;  
    animation: glassFX 2s;
  animation-iteration-count: infinite;
}
@keyframes glassFX {
  0% {
    width: 0%;
    background-color: rgba(255,255,255,0.4);
  }
  60% {
    width: 120%;
    background-color: rgba(255,255,255,0.0);
  }
  61% {
    width: 0%;
    background-color: rgba(255,255,255,0.4);
  }
  100% {
    width: 120%;
    background-color: rgba(255,255,255,0.0);
  }
}