Tạo hiệu ứng ánh sáng chạy ngang qua logo (flash light css)

Trong một trang web/blog, chúng ta muốn làm nổi bật logo, thì thường phải dùng jquery flash, hay dùng ảnh gif, hoặc nếu bạn giỏi về photoshop có thể làm cho logo của bạn trở nên đẹp hơn. Thay vì những cách kể trên, các bạn có thể dùng css3 để tạo nên hiệu ứng ánh sáng chạy qua logo. Source code này đã được mình lấy từ CanhMe, một trang web với mã nguồn wordpress.

Demo

Demo thì các bạn có thể nhìn thấy ở ngay ảnh phía bên trên rồi.

Cách thực hiện

Bước 1: Truy cập blogger.com > chủ đề > chỉnh sửa HTML
Bước 2: Chèn CSS trên thẻ đóng

]]></b:skin>

#logo-flash{position:relative;width:225px;margin:0 auto;overflow:hidden}
#logo-flash:before {content: "";position: absolute;left: -665px;top: -460px;width: 200px;height: 10px;background-color: rgba(255,255,255,.5);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-60deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: searchLights 1.5s ease-out 1s infinite;-o-animation: searchLights 1.5s ease-out 1s infinite;animation: searchLights 1.5s ease-out 1s infinite;}@-webkit-keyframes searchLights {0% { left: -100px;top: 0;} to{left: 250px;top: 0;}}@-o-keyframes searchLights {0% { left: -100px;top: 0;} to{left: 250px;top: 0;}}@-moz-keyframes searchLights {0% { left: -100px;top: 0;} to{left: 250px;top: 0;}}@keyframes searchLights {0% { left: -100px;top: 0;} to{left: 250px;top: 0;}}

Bước 3: Chỉnh sửa thông số ở phần

width:225px

cho phù hợp với logo của bạn, nếu logo của bạn ở vị trí trái hoặc phải, xóa bỏ thuộc tính

margin:0 auto

đi.
Bước 4: Chèn HTML bao bọc ảnh logo của bạn, hoặc cũng có thể là chữ cũng được.
Ví dụ: <div id="logo-flash"><img src='link ảnh'/></div> hoặc
<div id="logo-flash">BLOGGER</div>

Tổng kết

Vậy là mình đã hướng dẫn xong các bạn cách Tạo hiệu ứng ánh sáng chạy ngang qua logo (flash css), chúc các bạn thành công. Nếu có gì thắc mắc hãy bình luận bên dưới, mình sẽ giải đáp với tốc độ bàn thờ.