Cách chèn logo với hiệu ứng ánh sáng chuyển động cực kỳ bắt mắt

Mẹo nhỏ sau đây có thể sẽ làm cho logo trang blog của các bạn trở nên nổi bật hơn bao giờ hết. Thay vì chèn một cái logo như bình thường, các bạn có thể tạo một hiệu ứng nhỏ thôi nhưng khiến logo cực ktỳ bắt mắt. Một tia ánh sáng nhẹ chạy ngang sẽ giúp xóa tan sự đơn điệu đồng thời nhấn mạnh đến thông điệp mà bạn muốn gửi gắm vào logo của mình

Demo

Logo với hiệu ứng ánh sáng chuyển động

Các bước thực hiện như sau

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>

Copy

#logo-flash{position:relative;width:225px; margin:0 auto}

#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: Tùy chỉnh

-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ờ.
....
Phần mở rộng

Với code trên bạn cũng có thể tùy biến một chút, thay vì cho chạy chéo thì các bạn có thể cho nó chạy ngang đứng cũng khá đẹp. Tùy biến code như bên dưới

Copy

#logo-flash{position:relative;width:125px; margin:0 auto}

#logo-flash:before {content: "";position: absolute;left: -665px;top: -460px;width: 100px;height: 10px;background-color: rgba(255,255,255,.5);-webkit-transform: rotate(-90deg);-moz-transform: rotate(-60deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);-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;}}