Tạo hiệu ứng chạy qua lại cho logo bằng css

Xin chào các bạn, hôm nay minh xin chia sẻ một thủ thuật khá đơn giản.Tạo hiệu ứng chạy qua lại cho logo bằng css

Tạo hiệu ứng chạy qua lại cho logo bằng css
Tạo hiệu ứng chạy qua lại cho logo bằng css

Chỉ với đoạn css này thì bạn có thể tạo được hiệu ứng rồi.Demo logo blog của mình luôn nhé!

 Thêm đoạn css dưới đây lên ]]></b:skin> là xong :

/* Effect Logo */
#main-logo a{position:relative}
#main-logo a:before,#main-logo a:after{content:"";position:absolute;bottom: 50%;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgb(4, 85, 133);z-index:999999999}
#main-logo a:before{left:-5%;animation:light-left 3s infinite alternate linear}
#main-logo 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}}

Lưu Ý:

Bạn nhớ thay #main-logo thành thẻ css logo của bạn nhé! Thủ thuật này khá đơn giản và chắc chẳng cần phải chúc thanh công đâu nhỉ !
Created by Voz Blogger
DMCA.com Protection Status
  • Bình Luận
  • Lưu ý
  • Một số lưu ý khi bình luận

    Không đăng bình luận có nội dung khiêu dâm, 18+

    Không đăng bình luận có liên quan đến chính trị, nhà nước.

    Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.

    Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.

    Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".

    Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.

    Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.

    Được đăng bình luận có liên quan đến nội dung bài viết.

    Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).

Previous Post Next Post