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

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

guest
11 Comments
Inline Feedbacks
View all comments
Hoàng Nhân <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend
Hoàng Nhân (1)

ad có bài viết bào hướng dẫn tạo THÔNG BÁO giống như canhme. com ko (hay từ khóa nào để tìm trên google ko ad)
Thủ thuật: Nếu muốn tìm kiếm các khuyến mại của Canh Me trên Google, bạn hãy search: canhme + từ khóa.


Last edited 2 months ago by Hoàng Nhân
Triệu Vỹ <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">116</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hocban.vn

Hình như bác ấy hỏi làm cái bảng thông báo màu đỏ ý bác.

dat <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend
dat (1)

Thanks ad nhiều lắm. à mà còn dòng chữ “eat sleep mmo” như ở trang chủ kiemtiencenter làm như nào vậy bạn?

Đào Cáo <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">33</span><span style="color: #e91e63;">) </span>
Friend

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>
Friend

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>
Friend

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