Noel đến rồi , Add code cho tuyết rơi cho không khí nhé , Hôm nay mình sẽ share code tuyết rơi noel cho web theme flatsome cho anh em add lấy không khí nhé haha
code tuyết rơi noel cho web theme flatsome
thêm css nhé .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> <style> .snowflake{ color: #fff; } @-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{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> |
Lưu và xem kết quả nhé
Chúc cả nhà noel an lành nhé
theo : https://chothemeweb.com/
Pingback: code tuyết rơi noel cho web theme flatsome - FLATSOME - FREE EVERY THING