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.
