Tạo hiệu ứng bóng chuyển động qua lại cho trang blog

Tài liệu
Tạo hiệu ứng bóng chuyển động qua lại cho trang blog
Chuyên mục
Đăng vào
Chào các bạn hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng bóng chạy qua lại ở logo

Chỉ với đoạn css này thì bạn có thể tạo được hiệu ứng rồi. Thêm đoạn css dưới đây lên ]]></b:skin> là xong
/* Effect Logo */
header #header-inner a{position:relative}
header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}
header #header-inner a:before{left:-5%;animation:light-left 3s infinite alternate linear}
header #header-inner a:after{right:-5%;animation:light-right 3s infinite alternate linear}
@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}
Thủ thuật ngắn này thì ai cũng có thể làm được, không cần phải chúc thành công đâu nhỉ 😂

Hiện có bình luận

Thông báo
Cảm ơn bạn đã quan tâm đến thông báo này.
Xong