Tạo Hiệu ứng Animation ở Logo Giống Canh Me Và Kiemtiencenter

Trong dạo gần đây mình có thấy bên Canhme và Kiemtiencenter sử dụng hiệu ứng Animation ở logo website làm cho nó trở nên mờ ảo hơn. Trong bài viết này mình chia sẻ đến các bạn cách tạo hiệu ứng kiểu như vậy cho BlogsPot và WordPress.

Hiệu ứng Animation ở logo giống Canh Me

Cách tạo hiệu ứng Animation ở logo giống Canh Me và Kiemtiencenter

Hiệu ứng Animation ở logo giống Kientiencenter

Thủ thuật này hoàn toàn dùng CSS thôi chứ không có code kiếc gì phức tạp cả. Quan trọng là bạn xác định đúng ID / Class của logo là được.

Vì ở đây bạn chỉ có điểm mấu chốt thay cái ID logo của Hocban.vn bằng ID / Class của website bạn vào trong đoạn code dưới đây.

#logo {
	position:relative
}

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

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

#logo: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 thấy cái logo của Hocban.vn nó có ID là #logo | giờ các bạn sẽ tìm chỗ nào có ký tự #logo thì thay bằng bằng ID / Class của website bạn.

Sau đó đem dán vào trên cùng của khung CSS bổ sung (Additional CSS) trên WordPress cũng như Blogspot nhé !

Kết quả sau khi làm xong của Hocban.vn nè !

Hiệu ứng animation ở logo của Hocban.vn

Tạo hiệu ứng này trên Blogspot

Nếu mà chèn trên Blogspot thì anh em dán code dưới đây vào trong phần tùy chỉnh nâng cao >> Thêm CSS | Cách thay ID / class tương tự như trên nhé !

.centered-top .Header h1{
	position:relative;
        display: inline-block;
}

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

.centered-top .Header h1:before{left:155%;animation:light-left 1.8s infinite alternate linear}

.centered-top .Header h1: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}}

Với đoạn code trên thì cái logo theme Blogspot của mình có Class là .centered-top .Header h1 | là theme mặc định của Blogspot thôi chứ không có gì 😀

Bạn nào không xác định được ID / Class logo website đang dùng thì comment link bên dưới mình sẽ chỉ cho. Và đừng quên giới thiệu website blog của bạn nếu đang dùng hiệu ứng này bên dưới comment nhé !