Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Làm tranh treo tường đung đưa theo gió bằng CSS
Làm tranh treo tường đung đưa theo gió bằng CSS
Nguyễn Trung Hiếu
Share Code Web Company 2012

Làm tranh treo tường đung đưa theo gió bằng CSS

Sau bài viết về hiệu ứng mây trôi trong CSS đã thu hút khá nhiều lượt view và like, bài viết này tôi tiếp tục chia sẻ cho các bạn cách làm tranh treo tường đung đưa theo gió bằng CSS dùng để trang trí cho blog cá nhân hoặc phần notice khá cool

Cũng giống như bài hiệu ứng mây trôi trong CSS, bài viết này sẽ không có demo, và phần download code, tất cả những gì bạn cần làm để chiêm ngưỡng thành quả của mình là phải bắt tay vào làm thử. OK?
Xem qua demo bằng ảnh thôi cho dễ hình dung:
tranh treo tuong dung dua theo gio bang css
Cái khung tranh của chúng ta sẽ đung đưa theo gió, còn cái chữ bên trong cũng đung đưa theo, tạo hiệu ứng như thật luôn nhé.
Để làm cái này, chúng ta cần 1 thẻ div nồng trong thẻ span như sau

Chữ “Hello world!” bạn có thể thay bằng chữ của bạn, nếu không có thể bỏ trống.
Tiếp theo tới phần CSS. Phần đầu tiên, là tạo nền cho body và thẻ div cũng như các style về chữ.

Tiếp theo là style cho thẻ span

các bạn chú ý thuộc tính “animation: infinite swing 3s ease-in-out” có giá trị swing, giá trị này chúng ta sẽ khai báo kiểu keyframes dạng rotate tạo hiệu ứng đung đưa

Vậy là xong, cùng chiêm ngưỡng đi nào, bạn có thể thay cái ảnh nền trong thẻ div bằng ảnh của bạn nhé.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

3 Comments + Bình luận

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.777 hits
%d bloggers like this: