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 bạn có thể tham khảo

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.

Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha

8 Comment

  1. Nguyễn Đức Hoàng

    ối dồi ôi, vjp quá :3

    Reply 19/06/2021

  2. Tống Xuân Trung

    ối dồi ôi là tim <3

    Reply 19/06/2021

  3. Lê Anh Đức

    được quá em ơi =))

    Reply 19/06/2021

  4. Tống Xuân Trung

    tuyệt cú mèo :3

    Reply 19/06/2021

  7. Nguyễn Quang Linh

    bài này hay đó bạn

    Reply 20/06/2021

  8. Tống Xuân Trung

    cảm ơn bạn nhiều <3

    Reply 20/06/2021

Related Posts

The best CRM software in 2022

05:07 06/11/2022 App, Blogger, CRM

Customer relationship management (CRM) software has come a long way in the 15 or so years since I started using it. Today’s CRMs are incredibly versatile, and because of strong competition, have remained a relatively...

lên đầu trang