Tạo hiệu ứng Animation ở logo giống Canh Me và Kiemtiencenter
Gần đây tôi đã gặp bạn Canhme và KiemtienTrung tâm Sử dụng hiệu ứng Animation trong logo trang web để làm mờ hơn. Trong bài viết này, tôi chia sẻ với các bạn cách tạo các hiệu ứng như vậy cho BlogsPot và WordPress.
Hiệu ứng hoạt hình trong logo như Canh Me
Nội dung
Cách tạo hiệu ứng Animation trong các logo như Canh Me và Kiemtiencenter
Hiệu ứng hoạt ảnh trong logo như Kientiencenter
Thủ thuật này hoàn toàn chỉ sử dụng CSS, không có bất kỳ mã phức tạp nào. Điều quan trọng là bạn phải xác định đúng ID / Class của logo.
Vì ở đây bạn chỉ có mấu chốt là thay ID logo của Hocban.vn bằng ID / Class website của bạn ở đoạn mã bên dưới.
#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}}
Bạn xem logo của Hocban.vn nó có ID là #logo | Bây giờ bạn sẽ tìm thấy nơi có các ký tự #logo sau đó thay thế nó bằng ID / Class của trang web của bạn.
Sau đó dán nó lên trên khung CSS bổ sung (CSS bổ sung) trên WordPress cũng như Blogspot!
Thành quả của Hocban.vn sau khi hoàn thành!
Hiệu ứng hoạt hình trong logo của Hocban.vn
Tạo hiệu ứng này trên Blogspot
Nếu bạn chèn trên Blogspot thì hãy dán đoạn mã bên dưới vào phần tùy chỉnh nâng cao >> Thêm CSS | Cách thay đổi ID / class tương tự như trên!
.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 mã trên, biểu trưng chủ đề Blogspot của tôi có Lớp .centered-top .Header h1 | Đó là chủ đề mặc định của Blogspot, không có gì hơn
Nếu bạn không xác định được logo ID / Class mà trang web đang sử dụng, hãy bình luận liên kết bên dưới và tôi sẽ chỉ cho bạn. Và đừng quên giới thiệu trang web blog của bạn nếu bạn đang sử dụng hiệu ứng này trong phần bình luận bên dưới!
Có thể bạn cũng thích thủ thuật này
- Tự động thay đổi màu nền của đối tượng theo thời gian bằng cách sử dụng CSS
3.7 / 5 – (6 phiếu bầu)
Thông tin thêm
#Tạo #hiệu #ứng #Animation #ở #logo #giống #Canh #và #Kiemtiencenter
[rule_3_plain]
#Tạo #hiệu #ứng #Animation #ở #logo #giống #Canh #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
MỤC LỤC NỘI DUNG1 Cách tạo hiệu ứng Animation ở logo giống Canh Me và Kiemtiencenter2 Tạo hiệu ứng này trên Blogspot3 Có thể bạn cũng thích thủ thuật này
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é !
Có thể bạn cũng thích thủ thuật này
Tự động thay đổi màu nền một đối tượng theo thời gian bằng CSS
3.7/5 – (6 votes)
window.addEventListener(‘DOMContentLoaded’, function() {
jQuery(document).ready(function( $) {
$.post( ‘https://hocban.vn/wp-admin/admin-ajax.php’, {action: ‘mts_view_count’, id: ‘9417’});
});
});
#Tạo #hiệu #ứng #Animation #ở #logo #giống #Canh #và #Kiemtiencenter
[rule_2_plain]
#Tạo #hiệu #ứng #Animation #ở #logo #giống #Canh #và #Kiemtiencenter
[rule_2_plain]
#Tạo #hiệu #ứng #Animation #ở #logo #giống #Canh #và #Kiemtiencenter
[rule_3_plain]
#Tạo #hiệu #ứng #Animation #ở #logo #giống #Canh #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
MỤC LỤC NỘI DUNG1 Cách tạo hiệu ứng Animation ở logo giống Canh Me và Kiemtiencenter2 Tạo hiệu ứng này trên Blogspot3 Có thể bạn cũng thích thủ thuật này
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é !
Có thể bạn cũng thích thủ thuật này
Tự động thay đổi màu nền một đối tượng theo thời gian bằng CSS
3.7/5 – (6 votes)
window.addEventListener(‘DOMContentLoaded’, function() {
jQuery(document).ready(function( $) {
$.post( ‘https://hocban.vn/wp-admin/admin-ajax.php’, {action: ‘mts_view_count’, id: ‘9417’});
});
});
