Hiệu ứng load sánh sáng bằng CSS3 cho Logo Blogspot

Đăng Ngày: 07:09:00

Đức Vũ

Trong một website Wordpress hay một Blogspot. Chúng ta đều muốn có một logo nổi bật thì phấn lớn là đều nhờ vào Photoshop rồi, nhưng chưa phải là tất cả. Hôm nay Tiến Đức Blog sẽ hướng dẫn các bạn một mẹo nhỏ để logo có hiệu ứng load ánh sáng nổi bật hơn bằng CSS3 nhé!

Cách Thực Hiện

B1: Truy cập blogger.com > Chủ đề > Chỉnh sữa HTML.

B2: Chèn đoạn CSS này ngay trên ]]></b:skin>.

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

B3: Chỉnh sữa thông số phần màu xanh sao cho phù hợp với logo của bạn. Nếu logo của bạn ở bê trái hoặc phải thì xóa bỏ thuộc tính màu vàng đi.
B4: Chèn HTML vào logo của bạn hay chữ đều được.
Ảnh

<div id="logo-flash"><img src='link ảnh'/></div>

Chữ

<div id="logo-flash">BLOGGER</div>

Tổng Kết 

Chúc các bạn thành công nhé !