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 CanhmeKiemtiencenter 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 và Kiemtiencenter

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

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

Hieu ung animation o logo cua Kientiencenter

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

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

Có thể bạn cũng thích thủ thuật này

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Bài viết có vẻ liên quan ^ ^
avatar
3 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Đào CáoChung cư Lotus Central Bắc NinhHocban.vnNguyen T. Thi Recent comment authors
Đào Cáo <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">29</span><span style="color: #e91e63;">) </span>

cái này hay nè

Chung cư Lotus Central Bắc Ninh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>

Hiệu ứng khá hay. áp dụng thôi

Nguyen T. Thi <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>

Mình đã chèn mẫu số 1 được rồi. Nhưng mày mõ mãi mới được đó.