Noel không chỉ là dịp kỷ niệm ngày Thiên Chúa giáng thế theo đạo Thiên Chúa mà đây còn là một ngày lễ của mỗi gia đình. Hôm nay, hãy cùng SoiPro trang trí đón Noel cho blog/website bằng hiệu ứng tuyết rơi tuyệt đẹp nhé!
Demo → Chuyển SoiPro sang chế độ tối để nhìn rõ hiệu ứng tuyết rơi , hoặc bấm Result trong bảng mã dưới đây để xem thử !
Bước 1: Copy toàn bộ code dưới đây và tuỳ chỉnh:
See the Pen Snow Effect code SoiPro.Com by Hiệu Nguyễn (@shinenvh) on CodePen.
- Thay đổi màu tuyết: color:#bcbcef ( xem thêm các mã màu đầy đủ tại đây )
- Thay đổi số lượng: numberOfSnowflakes=50
- Thay đổi kích thước: Math.random()*30+"px"
- Thay đổi incon tuyết : <p class='snowflake'>❄</p>
- Một số icon tuyết đẹp : ❊ ✽ ✫ ✬ ✭ ❃ ❋ ❀ ✤ ✥ ❄ ✾ ⋆ ✢ ✰ ☘ ❋ ✦ ✧ ✣ ✷ ✸ ✺ ✱ ✶ ✻ ❈ ❉ ✪ ✿ ❁ ✩ ★ ✢ ✣ ☘ ✤ ✥ ✱ ✲ ✵ ✶ ✷ ❊ ❋ ✸ ✹ ✺ ✻ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❈ ❉
Bước 2: Chèn toàn bộ code vào trước thẻ đóng </body>
Bước 3: Lưu lại và tận hưởng thành quả!
Trên đây là toàn bộ hướng dẫn và code hiệu ứng tuyết rơi ngẫu nhiên trang trí Noel cho blog/website. Chúc các bạn có một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!