Header ads

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>
#logo-flash{position:relative;width:225pxmargin: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

#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;}}


Góc Bình Luận

1 Comments


- Chèn ảnh vào khung nhận xét với cú pháp: [img]Link-ảnh-chèn[/img]
- Tùy chọn các biểu tượng Emoticons khác nhau của yahoo