Hướng dẫn tạo hiệu ứng ánh sáng chạy qua ảnh bằng CSS

Thông thường để tạo nên hiệu ứng này trước kia các Coder thường làm bằng Flash. Ưu điểm của Flash là hiệu ứng chuyển động rất mượt, dung lượng nhẹ nhưng có một điểm là Google không đọc được FLASH nên không có lợi cho SEO vì vậy các coder ngày càng rời xa chúng, nếu nói không quá là đã loại bỏ hẳn FLASH trong thiết kế web.
May mắn thay CSS3 và HTML5 ra đời mang theo rất nhiều hiệu ứng khác nhau khi thiết kế giao diện cho website giúp cho các nhà phát triên web tiết kiệm rất nhiều thời gian khi thiết kế giao diện, thiết kế hiệu ứng chuyển động cơ bản mà không cần đến FLASH và đặc biệt là hiệu ứng chuyển động rất mượt mà không thua kém FLASH, rất tốt cho SEO. Ở đây mình không đi sâu giải thích thế nào là CSS3 và HTML5, các bạn muốn tìm hiểu thì hỏi bác google nhé.
Bài này mình sẽ hướng dẫn các bạn tạo hiệu ứng ánh sáng chạy qua ảnh rất đơn giản bằng CSS3.

HTML

<div id="box">
 <img src="img/thumualaptopcutphcm.jpg" alt="Thu mua laptop cũ giá cao TPHCM"/>
 <div class="box-hover"></div>
</div>

CSS

#box {
 position:relative;
 display:block;
 width:300px;
 height:195px;
 }
 div.box-hover {
 width:100%;
 height:100%;
 background-image:url("img/glass.png");
 background-position:-300px 0;
 background-repeat:no-repeat;
 position:absolute;
 left:0;top:0;
 }

 div.box-hover:hover {
 background:url("img/glass.png") no-repeat scroll 300px 0 transparent;
 transition:all 1.5s ease-in-out 0s;
 -moz-transition:all 1.5s ease-in-out 0s;
 -webkit-transition:all 1.5s ease-in-out 0s;
 cursor:pointer;
 }


FULL CODE

<!DOCTYPE html>
<html>
<head>
<title>Ánh sáng chạy qua ảnh bằng CSS</title>
<style type="text/css">
#box {
position:relative;
display:block;
width:300px;
height:195px;
}
div.box-hover {
width:100%;
height:100%;
background-image:url("img/glass.png");
background-position:-300px 0;
background-repeat:no-repeat;
position:absolute;
left:0;top:0;
}

div.box-hover:hover {
background:url("img/glass.png") no-repeat scroll 300px 0 transparent;
transition:all 1.5s ease-in-out 0s;
-moz-transition:all 1.5s ease-in-out 0s;
-webkit-transition:all 1.5s ease-in-out 0s;
-webkit-font-smoothing:antialiased;
cursor:pointer;
}
</style>
</head>
<body>

<div id="box">
<img src="img/thumualaptopcutphcm.jpg" alt="Thu mua laptop cũ giá cao TPHCM"/>
<div class="box-hover"></div>
</div>

</body>
</html>

https://www.spot.im/create-account?utm_source=LandingPage&utm_content=GetStarted

0 Response to "Hướng dẫn tạo hiệu ứng ánh sáng chạy qua ảnh bằng CSS"

Đăng nhận xét

Friends list