Tạo Hiệu ứng Tuyết Rơi Chỉ Bằng HTML - CSS - Thủ Thuật Web

• Home
• About
• Sitemap
• Learn English

Home

• HTML
• CSS
• _Sass
• _Bootstrap
• Javascript
• jQuery
• _jQuery Plugin
• ReactJS
• Adobe Animate CC
• Sitemap

Home / css / Tạo hiệu ứng tuyết rơi chỉ bằng HTML - CSS Tạo hiệu ứng tuyết rơi chỉ bằng HTML - CSS September 29, 2019 css Tạo hiệu ứng tuyết rơi bằng HTML - CSS cho trang web của bạn, không cần Javascript!! Hoạt động tốt trong các trình duyệt hiện đại sử dụng CSS animation (IE10 +). Chỉ cần thêm mã từ snippet.html vào trang web của bạn và tận hưởng những bông tuyết rơi tuyệt đẹp. Merry Christmas!! // HTML <div class="snowflakes" aria-hidden="true"> <div class="snowflake">❅</div> <div class="snowflake">❆</div> <div class="snowflake">❅</div> <div class="snowflake">❆</div> <div class="snowflake">❅</div> <div class="snowflake">❆</div> <div class="snowflake">❅</div> <div class="snowflake">❆</div> <div class="snowflake">❅</div> <div class="snowflake">❆</div> <div class="snowflake">❅</div> <div class="snowflake">❆</div> </div> // CSS <style> @-webkit-keyframes snowflakes-fall { 0% {top:-10%} 100% {top:100%} } @-webkit-keyframes snowflakes-shake { 0%,100% {-webkit-transform:translateX(0);transform:translateX(0)} 50% {-webkit-transform:translateX(80px);transform:translateX(80px)} } @keyframes snowflakes-fall { 0% {top:-10%} 100% {top:100%} } @keyframes snowflakes-shake { 0%,100%{ transform:translateX(0)} 50% {transform:translateX(80px)} } .snowflake { color: #fff; font-size: 1em; font-family: Arial, sans-serif; text-shadow: 0 0 5px #000; position:fixed; top:-10%; z-index:9999; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:default; -webkit-animation-name:snowflakes-fall,snowflakes-shake; -webkit-animation-duration:10s,3s; -webkit-animation-timing-function:linear,ease-in-out; -webkit-animation-iteration-count:infinite,infinite; -webkit-animation-play-state:running,running; animation-name:snowflakes-fall,snowflakes-shake; animation-duration:10s,3s; animation-timing-function:linear,ease-in-out; animation-iteration-count:infinite,infinite; animation-play-state:running,running; } .snowflake:nth-of-type(0){ left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s } .snowflake:nth-of-type(1){ left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s } .snowflake:nth-of-type(2){ left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s } .snowflake:nth-of-type(3){ left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s } .snowflake:nth-of-type(4){ left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s } .snowflake:nth-of-type(5){ left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s } .snowflake:nth-of-type(6){ left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s } .snowflake:nth-of-type(7){ left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s } .snowflake:nth-of-type(8){ left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s } .snowflake:nth-of-type(9){ left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s } .snowflake:nth-of-type(10){ left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s } .snowflake:nth-of-type(11){ left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s } </style> Link thư viện: http://pajasevi.github.io/CSSnowflakes/ Tạo hiệu ứng tuyết rơi chỉ bằng HTML - CSS Reviewed by kentrung on September 29, 2019 Rating: 5

Liên hệ

Mỗi người một quan điểm, mỗi người một cách code khác nhau. Đây chỉ là ý kiến mang tính cá nhân trong quá trình học tập, nghiên cứu, làm việc... Nếu có gì thiếu sót hoặc code bị lỗi rất mong nhận được những lời đánh giá và sửa sai từ các bạn. Hy vọng chúng ta cùng nhau phát triển trên con đường sự nghiệp lập trình. Các bạn có thể liên hệ với mình qua một trong những hình thức dưới đây:

• Website: https://kentrung256.blogspot.com
• Gmail: trungnt256@gmail.com

Share This: Facebook Twitter Google+ Pinterest Linkedin

You May Also Like

css

No comments:

Subscribe to: Post Comments ( Atom )

Bài Xem Nhiều

• Tạo hiệu ứng tuyết rơi chỉ bằng HTML - CSS
• Tạo hiệu ứng mở sách 3D bằng CSS
• Mẹo nhanh: Lưu ý khi sử dụng phiên bản Slim của jQuery
• ReactJS cơ bản qua ví dụ thực tế - B2 tạo project và copy giao diện HTML
• Thay đổi màu nền khi bôi đen trong CSS

Tags

css (19) javascript (16) react (10) project javascript (9) jquery plugin (8) jquery (6) html (5) hướng dẫn (5) adobe animate (4) bootstrap (1) font icon (1) sass (1)

Sự khác nhau giữa những điều tưởng giống nhau

Bài viết tổng hợp những điều tưởng giống nhau nhưng thực ra khác nhau VL trong HTML - CSS - JAVASCRIPT. Bài viết được tổng hợp chủ yếu tại đ...

Tìm Bài Theo Tháng

• May 2021 (2)
• December 2020 (1)
• November 2019 (3)
• October 2019 (16)
• September 2019 (10)
• August 2019 (3)
• July 2019 (3)
• May 2019 (5)
• April 2019 (4)
• March 2019 (1)
• January 2019 (1)
• December 2018 (1)
• November 2018 (4)
• October 2018 (1)
• August 2018 (1)
• March 2018 (10)
• January 2018 (2)
• December 2017 (4)
• November 2017 (2)
• June 2017 (1)
• May 2017 (1)

Total Pageviews

Powered by Blogger.

Random Posts

randomposts

Tags

css (19) javascript (16) react (10) project javascript (9) jquery plugin (8) jquery (6) html (5) hướng dẫn (5) adobe animate (4) bootstrap (1) font icon (1) sass (1)

Recent Posts

recentposts Created By ThemeXpose