CSS3 Tạo Hiệu ứng Lá Thu Rơi | Cosmos Pham's Blog

Trang chủ » Hiệu ứng Lá Rơi Cho Web » CSS3 Tạo Hiệu ứng Lá Thu Rơi | Cosmos Pham's Blog

Có thể bạn quan tâm

Hôm nay mình hướng dẫn các bạn tạo hiệu ứng lá thu rơi bằng CSS3. Nếu kết hợp với JavaScript thì sẽ đẹp và hay hơn, nhưng nội dung đó xin dành cho bài viết tiếp theo.

CSS3 tạo hiệu ứng lá thu rơi

Lưu ý: Chỉ trình duyệt Chrome hỗ trợ các thuộc tính CSS3 này.

Các thẻ HTML

Bạn tạo file HTML và thêm section sau vào.

<section id="falling-demo"> <div id="container"> <div class="leaf-01"> <img src="images/leaves-01.png"> </div> <div class="leaf-02"> <img src="images/leaves-02.png"> </div> <div class="leaf-03"> <img src="images/leaves-03.png"> </div> </div> </section> Định dạng bằng CSS

Định dạng chung. Tạo khung viền, ẩn nội dung tràn ra ngoài, căn giữa khung…

#container { border: 2px solid yellow; width: 400px; height: 400px; margin: auto; overflow: hidden; position: relative; top: 100px; }

Cho những chiếc lá vị trí ban đầu là bên ngoài khung. Thiết lập hiệu ứng animation là fall, trình diễn tuyến tính, thời gian 5 giây và lặp vô tận.

.leaf-01, .leaf-02, .leaf-03 { top: -100px; position: absolute; -webkit-animation: fall linear 5s infinite; }

Thiết lập riêng vị trí ban đầu – tính từ bên trái – cho từng chiếc lá. Và thời gian hoãn.

.leaf-01 { left: 150px; -webkit-animation-delay: 0s; } .leaf-02 { left: 050px; -webkit-animation-delay: 2s; } .leaf-03 { left: 250px; -webkit-animation-delay: 5s; }

Cuối cùng, tạo các @keyframes tên fall. Tùy từng thời điểm trên timeline, bạn cho trạng thái của lá khác nhau để có cảm giác như lá đang rơi thật.

@-webkit-keyframes fall { 0% { top: 000px; -webkit-transform: rotate(30deg); opacity: 1; -moz-opacity: 1; filter:alpha(opacity=10); } 40% { -webkit-transform: rotate(50deg); } 80% { -webkit-transform: rotate(80deg); } 95% { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=10); } 100% { -webkit-transform: rotate(100deg); top: 300px; left: 0px; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } }

Xong. Mặc dù hiệu ứng còn đơn giản. Nhưng hy vọng qua bài viết này, các bạn hiểu rõ thêm cách sử dụng thuộc tính animation, sử dụng @keyframes cùng các thuộc tính transform, animation-delay…

Rate this:

Share this:

  • Tweet
  • Share on Tumblr
  • More
Like Loading...

Related

Từ khóa » Hiệu ứng Lá Rơi Cho Web