Loading [MathJax]/extensions/MathZoom.js

Share code tạo hiệu ứng tuyết rơi cho website

hí xin chào mọi người nha, nay thì mình xin chia sẽ cho mọi người cách tạo hiệu ứng tuyết rơi cực kì đẹp nhá, tuy nhiên thì tuyết này khá là thưa nhưng nó không che đi quá nhiều nội dung trong khi đọc. làm thế này thì chúng ta sẽ có cho mình một cái không khí của mùa giáng sinh thật zui zẻ nhá.

Share code tạo hiệu ứng tuyết rơi cho website

 

okiii  thì để mà tạo ra hiệu ứng tuyết rơi thì :

bước 1: truy cập vào trang quản trị của blogger --> chủ đề --> chỉnh sửa HTML

bước 2: mọi người tìm cho mình thẻ  </body> và copy đoạn code bên dưới dán vào phía trên thẻ </body> nhé. 


   <style>@-webkit-keyframes  snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes  snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes  snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes  snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{color:#fff;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} </style><div class="snowflakes" aria-hidden="true"><div class="snowflake" style="font-size: 30px;"></div><div class="snowflake" style="font-size: 40px;"></div><div class="snowflake" style="font-size: 30px;"></div><div class="snowflake" style="font-size: 22px;"></div><div class="snowflake" style="font-size: 50px;"></div><div class="snowflake" style="font-size: 20px;"></div><div class="snowflake" style="font-size: 70px;"></div><div class="snowflake" style="font-size: 20px;"></div></div>  

okiii và dán vào </body> song thì các bạn lưu lại và thưởng thức thôi 

code này thì code thuần bằng HTML và CSS nên mọi người không phải lo gì về việc tốc độ load web bị chậm đi đâu nhá. 

ở bài sao thì mình sẽ share thêm một dạng tuyết nữa cũng khá đẹp, và đó là toàn bộ nội dung mình muốn chia sẽ đến các bạn, nếu có thắc mắc gì thì hãy comment bên dưới cho mình biết nhá, chúc các bạn thành công và có một mùa Giáng Sinh thật zui zẻ nha. 
Thầy Hiếu Bụng Bự

Chuyến phiêu lưu của đời là học hỏi. Mục đích của đời là trưởng thành. Bản tính của đời là thay đổi. Thách thức của đời là vượt qua. Tinh túy của đời là quan tâm. Cơ hội của đời là phụng sự. Bí mật của đời là dám làm. Hương vị của đời là giúp đỡ. Vẻ đẹp của đời là cho đi.

Post a Comment

Previous Post Next Post