Tháng 11 qua đi cũng là lúc chúng ta đón chào tháng 12 với không khí lễ Giáng sinh ấm áp, an lành hòa mình vào không khí lễ hội Giáng sinh, Giaodien.blog xin chia sẻ với bạn Hiệu ứng tuyết rơi cho blogspot, giúp bạn truyền tải thông điệp sáng sinh hạnh phúc mọi người bạn nhé!
Demo trực tiếp ở bài viết này
Nếu chỉ cài cho một bài viết nào đó thì copy code dán vào HTML của bài viết đó.
Demo trực tiếp ở bài viết này
Code hiệu ứng tuyết rơi chỉ có CSS + HTML nên rất nhẹ cho blog, không ảnh hưởng đến tốc độ tải trang. Cách cài đặt Hiệu ứng tuyết rơi cho blogspot đơn giản là bạn chỉ cần copy toàn bộ đoạn code bên dưới dán trước thẻ đóng </body> sau đó lưu lại là xong.
Nếu chỉ cài cho một bài viết nào đó thì copy code dán vào HTML của bài viết đó.
<style>/*<![CDATA[*/@-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">❅</div><div class="snowflake" style="font-size: 40px;">❆ </div><div class="snowflake">❅</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>
Chúc các bạn một mùa Giáng sinh anh lành, hạnh phúc.
Bài viết: Hiệu ứng tuyết rơi cho Blogger mùa Giáng sinh được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét