Kết quả 1 đến 3 của 3
-
07-28-2015, 11:10 AM #1Junior Member
- Ngày tham gia
- Aug 2015
- Bài viết
- 0
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.
Demo
Các bạn có thể xem DEMO tại muabanlaptopcuhcm .com (nhớ rê chuột vào ảnh để xem hiệu ứng nhé). Xin lỗi mình không gửi link được.
Các bạn muốn download source code của bài viết này thì vào mục Số hóa -> rồi đọc bài hướng dẫn mình viết nhé, link down ở cuối bài
HTML
1<div id="box">
2
3
4
[IMG]img/thumualaptopcutphcm.jpg[/IMG]
<div {
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 {
;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;
cursorointer;
}
View more random threads:
- Demo: Cách chèn file nhạc và video bằng html 5 - Basic HTML 5 với media element
- Giáo trình học Lập trình WEB 1 của Trường mình - ĐH Khoa Học Tự Nhiên TP HCM.
- Giáo trình học html đầy đủ có kèm video
- Giúp làm bài html
- [Share] Code trang bán hosting, domain vừa rip !!
- Chia sẻ: Code website tivi online, truyền hình trực tuyến tivi365.net
- Lỗi text căn giữa
- Tải Notepad++ 5.9 RC - Công cụ để viết code
- Giúp mình js và css khi di chuột vào ảnh thì hiện text trong div
- Công nghệ HTML 5 cực hay
-
10-18-2015, 11:01 AM #2Junior Member
- Ngày tham gia
- Aug 2015
- Bài viết
- 0
hiệu ứng này hay đó bác ? e làm thấy rất tốt có điều đang ngại không biết các trình duyệt hỗ trợ ie8 thì thế nào nhỉ ? có cách fix không bác
-
08-12-2016, 02:53 PM #3Junior Member
- Ngày tham gia
- Nov 2015
- Bài viết
- 1
Gửi bởi tpprovn
Bước 1: Xem nhãn áo xống để biết cách chăm sóc vải hạp Dù hồ hết vải đều có thể giặt bằng máy, bạn vẫn nên kiểm tra nhãn chỉ dẫn trông nom, đặc biệt là với đồ len và đồ mỏng. Một số...
Bí quyết sử dụng máy giặt đúng...