Các bạn chỉ cần chèn đoạn css dưới đây vào cặp thẻ <style></style> và đặt ở đâu tùy ý
.g-snows{position:relative;z-index:9999}.g-snows>hoamai{opacity:0;position:fixed;top:0;border-radius:100%;background-color:#fff;background-repeat:no-repeat;background-size:100% auto;animation-name:snow-drop;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:forwards;background:url(https://lh3.googleusercontent.com/-ThsH0Xqfxts/YAncIOdBIVI/AAAAAAAADJ0/vRtfsnHNoiEHKqeuSATHQYm50LGXDbJZgCLcBGAsYHQ/h120/hoamai.png)}.g-snows>hoamai:nth-child(1){left:17%;width:7px;height:7px;animation-duration:7606ms;animation-delay:799ms}.g-snows>hoamai:nth-child(2){left:11%;width:8px;height:8px;animation-duration:8647ms;animation-delay:2075ms}.g-snows>hoamai:nth-child(3){left:26%;width:3px;height:3px;animation-duration:10316ms;animation-delay:3343ms}.g-snows>hoamai:nth-child(4){left:15%;width:1px;height:1px;animation-duration:8168ms;animation-delay:2786ms}.g-snows>hoamai:nth-child(5){left:11%;width:9px;height:9px;animation-duration:10347ms;animation-delay:4057ms}.g-snows>hoamai:nth-child(6){left:6%;width:3px;height:3px;animation-duration:7051ms;animation-delay:4937ms}.g-snows>hoamai:nth-child(7){left:54%;width:2px;height:2px;animation-duration:8869ms;animation-delay:3447ms}.g-snows>hoamai:nth-child(8){left:67%;width:2px;height:2px;animation-duration:5289ms;animation-delay:1182ms}.g-snows>hoamai:nth-child(9){left:77%;width:3px;height:3px;animation-duration:12310ms;animation-delay:3776ms}.g-snows>hoamai:nth-child(10){left:2%;width:1px;height:1px;animation-duration:7970ms;animation-delay:2728ms}.g-snows>hoamai:nth-child(11){left:84%;width:5px;height:5px;animation-duration:13254ms;animation-delay:4258ms}.g-snows>hoamai:nth-child(12){left:57%;width:19px;height:19px;animation-duration:7924ms;animation-delay:4205ms}.g-snows>hoamai:nth-child(13){left:60%;width:12px;height:12px;animation-duration:10346ms;animation-delay:3012ms}.g-snows>hoamai:nth-child(14){left:81%;width:5px;height:5px;animation-duration:5360ms;animation-delay:2400ms}.g-snows>hoamai:nth-child(15){left:91%;width:7px;height:7px;animation-duration:7269ms;animation-delay:634ms}.g-snows>hoamai:nth-child(16){left:19%;width:6px;height:6px;animation-duration:5056ms;animation-delay:4718ms}.g-snows>hoamai:nth-child(17){left:53%;width:11px;height:11px;animation-duration:7889ms;animation-delay:3311ms}.g-snows>hoamai:nth-child(18){left:18%;width:7px;height:7px;animation-duration:6965ms;animation-delay:551ms}.g-snows>hoamai:nth-child(19){left:24%;width:6px;height:6px;animation-duration:11998ms;animation-delay:4786ms}.g-snows>hoamai:nth-child(20){left:83%;width:11px;height:11px;animation-duration:5149ms;animation-delay:960ms}.g-snows>hoamai:nth-child(21){left:16%;width:8px;height:8px;animation-duration:6557ms;animation-delay:2575ms}.g-snows>hoamai:nth-child(22){left:1%;width:4px;height:4px;animation-duration:7648ms;animation-delay:1833ms}.g-snows>hoamai:nth-child(23){left:40%;width:4px;height:4px;animation-duration:12003ms;animation-delay:842ms}.g-snows>hoamai:nth-child(24){left:58%;width:4px;height:4px;animation-duration:11412ms;animation-delay:2657ms}.g-snows>hoamai:nth-child(25){left:76%;width:6px;height:6px;animation-duration:9239ms;animation-delay:4499ms}.g-snows>hoamai:nth-child(26){left:22%;width:3px;height:3px;animation-duration:8995ms;animation-delay:1831ms}.g-snows>hoamai:nth-child(27){left:115%;width:3px;height:3px;animation-duration:7498ms;animation-delay:2107ms}.g-snows>hoamai:nth-child(28){left:104%;width:8px;height:8px;animation-duration:6177ms;animation-delay:2927ms}.g-snows>hoamai:nth-child(29){left:61%;width:9px;height:9px;animation-duration:8308ms;animation-delay:643ms}.g-snows>hoamai:nth-child(30){left:72%;width:14px;height:14px;animation-duration:6638ms;animation-delay:1359ms}.g-snows>hoamai:nth-child(31){left:102%;width:16px;height:16px;animation-duration:11059ms;animation-delay:1638ms}.g-snows>hoamai:nth-child(32){left:19%;width:0;height:0;animation-duration:11785ms;animation-delay:2803ms}.g-snows>hoamai:nth-child(33){left:12%;width:6px;height:6px;animation-duration:5041ms;animation-delay:939ms}.g-snows>hoamai:nth-child(34){left:46%;width:3px;height:3px;animation-duration:6932ms;animation-delay:1243ms}.g-snows>hoamai:nth-child(35){left:131%;width:5px;height:5px;animation-duration:7856ms;animation-delay:241ms}.g-snows>hoamai:nth-child(36){left:23%;width:7px;height:7px;animation-duration:7784ms;animation-delay:1985ms}.g-snows>hoamai:nth-child(37){left:47%;width:4px;height:4px;animation-duration:11446ms;animation-delay:3203ms}.g-snows>hoamai:nth-child(38){left:6%;width:7px;height:7px;animation-duration:9481ms;animation-delay:3415ms}.g-snows>hoamai:nth-child(39){left:30%;width:8px;height:8px;animation-duration:8956ms;animation-delay:1652ms}.g-snows>hoamai:nth-child(40){left:93%;width:12px;height:12px;animation-duration:5497ms;animation-delay:692ms}.g-snows>hoamai:nth-child(41){left:114%;width:13px;height:13px;animation-duration:13602ms;animation-delay:1281ms}.g-snows>hoamai:nth-child(42){left:15%;width:17px;height:17px;animation-duration:11915ms;animation-delay:351ms}.g-snows>hoamai:nth-child(43){left:41%;width:4px;height:4px;animation-duration:6938ms;animation-delay:1389ms}.g-snows>hoamai:nth-child(44){left:18%;width:11px;height:11px;animation-duration:6975ms;animation-delay:1366ms}.g-snows>hoamai:nth-child(45){left:106%;width:7px;height:7px;animation-duration:9270ms;animation-delay:1044ms}.g-snows>hoamai:nth-child(46){left:100%;width:4px;height:4px;animation-duration:10962ms;animation-delay:4530ms}.g-snows>hoamai:nth-child(47){left:83%;width:11px;height:11px;animation-duration:7505ms;animation-delay:2442ms}.g-snows>hoamai:nth-child(48){left:138%;width:11px;height:11px;animation-duration:9408ms;animation-delay:3461ms}.g-snows>hoamai:nth-child(49){left:3%;width:7px;height:7px;animation-duration:5841ms;animation-delay:235ms}.g-snows>hoamai:nth-child(50){left:10%;width:11px;height:11px;animation-duration:8824ms;animation-delay:4533ms}.g-snows>hoamai:nth-child(51){left:41%;width:18px;height:18px;animation-duration:7294ms;animation-delay:2462ms}.g-snows>hoamai:nth-child(52){left:21%;width:7px;height:7px;animation-duration:5249ms;animation-delay:4972ms}.g-snows>hoamai:nth-child(53){left:81%;width:5px;height:5px;animation-duration:5942ms;animation-delay:3218ms}.g-snows>hoamai:nth-child(54){left:53%;width:15px;height:15px;animation-duration:7330ms;animation-delay:1843ms}.g-snows>hoamai:nth-child(55){left:110%;width:1px;height:1px;animation-duration:12253ms;animation-delay:2349ms}.g-snows>hoamai:nth-child(56){left:48%;width:5px;height:5px;animation-duration:8370ms;animation-delay:4697ms}.g-snows>hoamai:nth-child(57){left:103%;width:12px;height:12px;animation-duration:10097ms;animation-delay:1066ms}.g-snows>hoamai:nth-child(58){left:9%;width:5px;height:5px;animation-duration:5444ms;animation-delay:4619ms}.g-snows>hoamai:nth-child(59){left:46%;width:18px;height:18px;animation-duration:11026ms;animation-delay:2997ms}.g-snows>hoamai:nth-child(60){left:68%;width:7px;height:7px;animation-duration:12024ms;animation-delay:2287ms}.g-snows>hoamai:nth-child(61){left:60%;width:9px;height:9px;animation-duration:6829ms;animation-delay:3002ms}.g-snows>hoamai:nth-child(62){left:99%;width:8px;height:8px;animation-duration:7248ms;animation-delay:2183ms}.g-snows>hoamai:nth-child(63){left:40%;width:7px;height:7px;animation-duration:6134ms;animation-delay:826ms}.g-snows>hoamai:nth-child(64){left:70%;width:3px;height:3px;animation-duration:6371ms;animation-delay:4551ms}.g-snows>hoamai:nth-child(65){left:61%;width:7px;height:7px;animation-duration:8345ms;animation-delay:351ms}.g-snows>hoamai:nth-child(66){left:68%;width:10px;height:10px;animation-duration:10482ms;animation-delay:577ms}.g-snows>hoamai:nth-child(67){left:14%;width:6px;height:6px;animation-duration:9633ms;animation-delay:3301ms}.g-snows>hoamai:nth-child(68){left:45%;width:3px;height:3px;animation-duration:5898ms;animation-delay:3080ms}.g-snows>hoamai:nth-child(69){left:4%;width:11px;height:11px;animation-duration:8115ms;animation-delay:3123ms}.g-snows>hoamai:nth-child(70){left:17%;width:1px;height:1px;animation-duration:9889ms;animation-delay:4484ms}.g-snows>hoamai:nth-child(71){left:1%;width:7px;height:7px;animation-duration:11042ms;animation-delay:4430ms}.g-snows>hoamai:nth-child(72){left:28%;width:2px;height:2px;animation-duration:9945ms;animation-delay:343ms}.g-snows>hoamai:nth-child(73){left:9%;width:0;height:0;animation-duration:7378ms;animation-delay:493ms}.g-snows>hoamai:nth-child(74){left:64%;width:14px;height:14px;animation-duration:6749ms;animation-delay:1522ms}.g-snows>hoamai:nth-child(75){left:140%;width:5px;height:5px;animation-duration:8969ms;animation-delay:645ms}.g-snows>hoamai:nth-child(76){left:90%;width:0;height:0;animation-duration:5259ms;animation-delay:4151ms}.g-snows>hoamai:nth-child(77){left:5%;width:4px;height:4px;animation-duration:7632ms;animation-delay:1524ms}.g-snows>hoamai:nth-child(78){left:3%;width:18px;height:18px;animation-duration:7619ms;animation-delay:1043ms}.g-snows>hoamai:nth-child(79){left:28%;width:15px;height:15px;animation-duration:5314ms;animation-delay:4296ms}.g-snows>hoamai:nth-child(80){left:68%;width:2px;height:2px;animation-duration:5585ms;animation-delay:1749ms}.g-snows>hoamai:nth-child(81){left:57%;width:7px;height:7px;animation-duration:12011ms;animation-delay:4512ms}.g-snows>hoamai:nth-child(82){left:11%;width:4px;height:4px;animation-duration:5281ms;animation-delay:1782ms}.g-snows>hoamai:nth-child(83){left:8%;width:5px;height:5px;animation-duration:7533ms;animation-delay:2475ms}.g-snows>hoamai:nth-child(84){left:11%;width:10px;height:10px;animation-duration:5695ms;animation-delay:1810ms}.g-snows>hoamai:nth-child(85){left:120%;width:6px;height:6px;animation-duration:8462ms;animation-delay:1270ms}.g-snows>hoamai:nth-child(86){left:80%;width:3px;height:3px;animation-duration:5525ms;animation-delay:1552ms}.g-snows>hoamai:nth-child(87){left:82%;width:5px;height:5px;animation-duration:6954ms;animation-delay:4941ms}.g-snows>hoamai:nth-child(88){left:89%;width:10px;height:10px;animation-duration:6151ms;animation-delay:3487ms}.g-snows>hoamai:nth-child(89){left:54%;width:11px;height:11px;animation-duration:7822ms;animation-delay:3068ms}.g-snows>hoamai:nth-child(90){left:4%;width:1px;height:1px;animation-duration:9647ms;animation-delay:3795ms}.g-snows>hoamai:nth-child(91){left:53%;width:9px;height:9px;animation-duration:7790ms;animation-delay:86ms}.g-snows>hoamai:nth-child(92){left:29%;width:8px;height:8px;animation-duration:7628ms;animation-delay:3581ms}.g-snows>hoamai:nth-child(93){left:19%;width:5px;height:5px;animation-duration:11425ms;animation-delay:3453ms}.g-snows>hoamai:nth-child(94){left:122%;width:2px;height:2px;animation-duration:6403ms;animation-delay:1280ms}.g-snows>hoamai:nth-child(95){left:112%;width:15px;height:15px;animation-duration:12767ms;animation-delay:1370ms}.g-snows>hoamai:nth-child(96){left:7%;width:10px;height:10px;animation-duration:9324ms;animation-delay:852ms}.g-snows>hoamai:nth-child(97){left:48%;width:1px;height:1px;animation-duration:9656ms;animation-delay:4767ms}.g-snows>hoamai:nth-child(98){left:65%;width:2px;height:2px;animation-duration:5747ms;animation-delay:4544ms}.g-snows>hoamai:nth-child(99){left:104%;width:2px;height:2px;animation-duration:7304ms;animation-delay:1576ms}.g-snows>hoamai:nth-child(100){left:16%;width:10px;height:10px;animation-duration:6635ms;animation-delay:1066ms}.g-snows>hoamai:nth-child(4n){width:14px;height:14px;background-position:-31px 0}.g-snows>hoamai:nth-child(4n+1){width:16px;height:16px;background-position:0 -23px}.g-snows>hoamai:nth-child(4n+2){width:13px;height:13px;background-position:0 -50px}.g-snows>hoamai:nth-child(4n+3){width:15px;height:15px;background-position:-49px -35px}@keyframes snow-drop{0%{transform:translate(0,0);opacity:.5;margin-left:0}10%{margin-left:15px}20%{margin-left:20px}25%{transform:translate(0,166.66667px);opacity:.75}30%{margin-left:15px}40%{margin-left:0}50%{transform:translate(0,466.66667px);opacity:1;margin-left:-15px}60%{margin-left:-20px}70%{margin-left:-15px}75%{transform:translate(0,800px);opacity:.5}80%{margin-left:0}100%{transform:translate(0,1000px);opacity:0}}
.g-snows{position:relative;z-index:9999}.g-snows>hoadao{opacity:0;position:fixed;top:0;border-radius:100%;background-color:#fff;background-repeat:no-repeat;background-size:100% auto;animation-name:snow-drop;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:forwards;background:url(https://lh3.googleusercontent.com/-tj60nk0dZI8/YAncICC3yQI/AAAAAAAADJw/cOlFSvb3mGoCGSZq-DomlE2kIriZTurnACLcBGAsYHQ/h120/hoadao.png)}.g-snows>hoadao:nth-child(1){left:17%;width:7px;height:7px;animation-duration:7606ms;animation-delay:799ms}.g-snows>hoadao:nth-child(2){left:11%;width:8px;height:8px;animation-duration:8647ms;animation-delay:2075ms}.g-snows>hoadao:nth-child(3){left:26%;width:3px;height:3px;animation-duration:10316ms;animation-delay:3343ms}.g-snows>hoadao:nth-child(4){left:15%;width:1px;height:1px;animation-duration:8168ms;animation-delay:2786ms}.g-snows>hoadao:nth-child(5){left:11%;width:9px;height:9px;animation-duration:10347ms;animation-delay:4057ms}.g-snows>hoadao:nth-child(6){left:6%;width:3px;height:3px;animation-duration:7051ms;animation-delay:4937ms}.g-snows>hoadao:nth-child(7){left:54%;width:2px;height:2px;animation-duration:8869ms;animation-delay:3447ms}.g-snows>hoadao:nth-child(8){left:67%;width:2px;height:2px;animation-duration:5289ms;animation-delay:1182ms}.g-snows>hoadao:nth-child(9){left:77%;width:3px;height:3px;animation-duration:12310ms;animation-delay:3776ms}.g-snows>hoadao:nth-child(10){left:2%;width:1px;height:1px;animation-duration:7970ms;animation-delay:2728ms}.g-snows>hoadao:nth-child(11){left:84%;width:5px;height:5px;animation-duration:13254ms;animation-delay:4258ms}.g-snows>hoadao:nth-child(12){left:57%;width:19px;height:19px;animation-duration:7924ms;animation-delay:4205ms}.g-snows>hoadao:nth-child(13){left:60%;width:12px;height:12px;animation-duration:10346ms;animation-delay:3012ms}.g-snows>hoadao:nth-child(14){left:81%;width:5px;height:5px;animation-duration:5360ms;animation-delay:2400ms}.g-snows>hoadao:nth-child(15){left:91%;width:7px;height:7px;animation-duration:7269ms;animation-delay:634ms}.g-snows>hoadao:nth-child(16){left:19%;width:6px;height:6px;animation-duration:5056ms;animation-delay:4718ms}.g-snows>hoadao:nth-child(17){left:53%;width:11px;height:11px;animation-duration:7889ms;animation-delay:3311ms}.g-snows>hoadao:nth-child(18){left:18%;width:7px;height:7px;animation-duration:6965ms;animation-delay:551ms}.g-snows>hoadao:nth-child(19){left:24%;width:6px;height:6px;animation-duration:11998ms;animation-delay:4786ms}.g-snows>hoadao:nth-child(20){left:83%;width:11px;height:11px;animation-duration:5149ms;animation-delay:960ms}.g-snows>hoadao:nth-child(21){left:16%;width:8px;height:8px;animation-duration:6557ms;animation-delay:2575ms}.g-snows>hoadao:nth-child(22){left:1%;width:4px;height:4px;animation-duration:7648ms;animation-delay:1833ms}.g-snows>hoadao:nth-child(23){left:40%;width:4px;height:4px;animation-duration:12003ms;animation-delay:842ms}.g-snows>hoadao:nth-child(24){left:58%;width:4px;height:4px;animation-duration:11412ms;animation-delay:2657ms}.g-snows>hoadao:nth-child(25){left:76%;width:6px;height:6px;animation-duration:9239ms;animation-delay:4499ms}.g-snows>hoadao:nth-child(26){left:22%;width:3px;height:3px;animation-duration:8995ms;animation-delay:1831ms}.g-snows>hoadao:nth-child(27){left:115%;width:3px;height:3px;animation-duration:7498ms;animation-delay:2107ms}.g-snows>hoadao:nth-child(28){left:104%;width:8px;height:8px;animation-duration:6177ms;animation-delay:2927ms}.g-snows>hoadao:nth-child(29){left:61%;width:9px;height:9px;animation-duration:8308ms;animation-delay:643ms}.g-snows>hoadao:nth-child(30){left:72%;width:14px;height:14px;animation-duration:6638ms;animation-delay:1359ms}.g-snows>hoadao:nth-child(31){left:102%;width:16px;height:16px;animation-duration:11059ms;animation-delay:1638ms}.g-snows>hoadao:nth-child(32){left:19%;width:0;height:0;animation-duration:11785ms;animation-delay:2803ms}.g-snows>hoadao:nth-child(33){left:12%;width:6px;height:6px;animation-duration:5041ms;animation-delay:939ms}.g-snows>hoadao:nth-child(34){left:46%;width:3px;height:3px;animation-duration:6932ms;animation-delay:1243ms}.g-snows>hoadao:nth-child(35){left:131%;width:5px;height:5px;animation-duration:7856ms;animation-delay:241ms}.g-snows>hoadao:nth-child(36){left:23%;width:7px;height:7px;animation-duration:7784ms;animation-delay:1985ms}.g-snows>hoadao:nth-child(37){left:47%;width:4px;height:4px;animation-duration:11446ms;animation-delay:3203ms}.g-snows>hoadao:nth-child(38){left:6%;width:7px;height:7px;animation-duration:9481ms;animation-delay:3415ms}.g-snows>hoadao:nth-child(39){left:30%;width:8px;height:8px;animation-duration:8956ms;animation-delay:1652ms}.g-snows>hoadao:nth-child(40){left:93%;width:12px;height:12px;animation-duration:5497ms;animation-delay:692ms}.g-snows>hoadao:nth-child(41){left:114%;width:13px;height:13px;animation-duration:13602ms;animation-delay:1281ms}.g-snows>hoadao:nth-child(42){left:15%;width:17px;height:17px;animation-duration:11915ms;animation-delay:351ms}.g-snows>hoadao:nth-child(43){left:41%;width:4px;height:4px;animation-duration:6938ms;animation-delay:1389ms}.g-snows>hoadao:nth-child(44){left:18%;width:11px;height:11px;animation-duration:6975ms;animation-delay:1366ms}.g-snows>hoadao:nth-child(45){left:106%;width:7px;height:7px;animation-duration:9270ms;animation-delay:1044ms}.g-snows>hoadao:nth-child(46){left:100%;width:4px;height:4px;animation-duration:10962ms;animation-delay:4530ms}.g-snows>hoadao:nth-child(47){left:83%;width:11px;height:11px;animation-duration:7505ms;animation-delay:2442ms}.g-snows>hoadao:nth-child(48){left:138%;width:11px;height:11px;animation-duration:9408ms;animation-delay:3461ms}.g-snows>hoadao:nth-child(49){left:3%;width:7px;height:7px;animation-duration:5841ms;animation-delay:235ms}.g-snows>hoadao:nth-child(50){left:10%;width:11px;height:11px;animation-duration:8824ms;animation-delay:4533ms}.g-snows>hoadao:nth-child(51){left:41%;width:18px;height:18px;animation-duration:7294ms;animation-delay:2462ms}.g-snows>hoadao:nth-child(52){left:21%;width:7px;height:7px;animation-duration:5249ms;animation-delay:4972ms}.g-snows>hoadao:nth-child(53){left:81%;width:5px;height:5px;animation-duration:5942ms;animation-delay:3218ms}.g-snows>hoadao:nth-child(54){left:53%;width:15px;height:15px;animation-duration:7330ms;animation-delay:1843ms}.g-snows>hoadao:nth-child(55){left:110%;width:1px;height:1px;animation-duration:12253ms;animation-delay:2349ms}.g-snows>hoadao:nth-child(56){left:48%;width:5px;height:5px;animation-duration:8370ms;animation-delay:4697ms}.g-snows>hoadao:nth-child(57){left:103%;width:12px;height:12px;animation-duration:10097ms;animation-delay:1066ms}.g-snows>hoadao:nth-child(58){left:9%;width:5px;height:5px;animation-duration:5444ms;animation-delay:4619ms}.g-snows>hoadao:nth-child(59){left:46%;width:18px;height:18px;animation-duration:11026ms;animation-delay:2997ms}.g-snows>hoadao:nth-child(60){left:68%;width:7px;height:7px;animation-duration:12024ms;animation-delay:2287ms}.g-snows>hoadao:nth-child(61){left:60%;width:9px;height:9px;animation-duration:6829ms;animation-delay:3002ms}.g-snows>hoadao:nth-child(62){left:99%;width:8px;height:8px;animation-duration:7248ms;animation-delay:2183ms}.g-snows>hoadao:nth-child(63){left:40%;width:7px;height:7px;animation-duration:6134ms;animation-delay:826ms}.g-snows>hoadao:nth-child(64){left:70%;width:3px;height:3px;animation-duration:6371ms;animation-delay:4551ms}.g-snows>hoadao:nth-child(65){left:61%;width:7px;height:7px;animation-duration:8345ms;animation-delay:351ms}.g-snows>hoadao:nth-child(66){left:68%;width:10px;height:10px;animation-duration:10482ms;animation-delay:577ms}.g-snows>hoadao:nth-child(67){left:14%;width:6px;height:6px;animation-duration:9633ms;animation-delay:3301ms}.g-snows>hoadao:nth-child(68){left:45%;width:3px;height:3px;animation-duration:5898ms;animation-delay:3080ms}.g-snows>hoadao:nth-child(69){left:4%;width:11px;height:11px;animation-duration:8115ms;animation-delay:3123ms}.g-snows>hoadao:nth-child(70){left:17%;width:1px;height:1px;animation-duration:9889ms;animation-delay:4484ms}.g-snows>hoadao:nth-child(71){left:1%;width:7px;height:7px;animation-duration:11042ms;animation-delay:4430ms}.g-snows>hoadao:nth-child(72){left:28%;width:2px;height:2px;animation-duration:9945ms;animation-delay:343ms}.g-snows>hoadao:nth-child(73){left:9%;width:0;height:0;animation-duration:7378ms;animation-delay:493ms}.g-snows>hoadao:nth-child(74){left:64%;width:14px;height:14px;animation-duration:6749ms;animation-delay:1522ms}.g-snows>hoadao:nth-child(75){left:140%;width:5px;height:5px;animation-duration:8969ms;animation-delay:645ms}.g-snows>hoadao:nth-child(76){left:90%;width:0;height:0;animation-duration:5259ms;animation-delay:4151ms}.g-snows>hoadao:nth-child(77){left:5%;width:4px;height:4px;animation-duration:7632ms;animation-delay:1524ms}.g-snows>hoadao:nth-child(78){left:3%;width:18px;height:18px;animation-duration:7619ms;animation-delay:1043ms}.g-snows>hoadao:nth-child(79){left:28%;width:15px;height:15px;animation-duration:5314ms;animation-delay:4296ms}.g-snows>hoadao:nth-child(80){left:68%;width:2px;height:2px;animation-duration:5585ms;animation-delay:1749ms}.g-snows>hoadao:nth-child(81){left:57%;width:7px;height:7px;animation-duration:12011ms;animation-delay:4512ms}.g-snows>hoadao:nth-child(82){left:11%;width:4px;height:4px;animation-duration:5281ms;animation-delay:1782ms}.g-snows>hoadao:nth-child(83){left:8%;width:5px;height:5px;animation-duration:7533ms;animation-delay:2475ms}.g-snows>hoadao:nth-child(84){left:11%;width:10px;height:10px;animation-duration:5695ms;animation-delay:1810ms}.g-snows>hoadao:nth-child(85){left:120%;width:6px;height:6px;animation-duration:8462ms;animation-delay:1270ms}.g-snows>hoadao:nth-child(86){left:80%;width:3px;height:3px;animation-duration:5525ms;animation-delay:1552ms}.g-snows>hoadao:nth-child(87){left:82%;width:5px;height:5px;animation-duration:6954ms;animation-delay:4941ms}.g-snows>hoadao:nth-child(88){left:89%;width:10px;height:10px;animation-duration:6151ms;animation-delay:3487ms}.g-snows>hoadao:nth-child(89){left:54%;width:11px;height:11px;animation-duration:7822ms;animation-delay:3068ms}.g-snows>hoadao:nth-child(90){left:4%;width:1px;height:1px;animation-duration:9647ms;animation-delay:3795ms}.g-snows>hoadao:nth-child(91){left:53%;width:9px;height:9px;animation-duration:7790ms;animation-delay:86ms}.g-snows>hoadao:nth-child(92){left:29%;width:8px;height:8px;animation-duration:7628ms;animation-delay:3581ms}.g-snows>hoadao:nth-child(93){left:19%;width:5px;height:5px;animation-duration:11425ms;animation-delay:3453ms}.g-snows>hoadao:nth-child(94){left:122%;width:2px;height:2px;animation-duration:6403ms;animation-delay:1280ms}.g-snows>hoadao:nth-child(95){left:112%;width:15px;height:15px;animation-duration:12767ms;animation-delay:1370ms}.g-snows>hoadao:nth-child(96){left:7%;width:10px;height:10px;animation-duration:9324ms;animation-delay:852ms}.g-snows>hoadao:nth-child(97){left:48%;width:1px;height:1px;animation-duration:9656ms;animation-delay:4767ms}.g-snows>hoadao:nth-child(98){left:65%;width:2px;height:2px;animation-duration:5747ms;animation-delay:4544ms}.g-snows>hoadao:nth-child(99){left:104%;width:2px;height:2px;animation-duration:7304ms;animation-delay:1576ms}.g-snows>hoadao:nth-child(100){left:16%;width:10px;height:10px;animation-duration:6635ms;animation-delay:1066ms}.g-snows>hoadao:nth-child(4n){width:24px;height:24px;background-position:-39px 0px}.g-snows>hoadao:nth-child(4n+1){width:27px;height:27px;background-position:-37px 73px}.g-snows>hoadao:nth-child(4n+2){width:24px;height:24px;background-position:-7px -50px}.g-snows>hoadao:nth-child(4n+3){width:27px;height:27px;background-position:-50px -39px}@keyframes snow-drop{0%{transform:translate(0,0);opacity:.5;margin-left:0}10%{margin-left:15px}20%{margin-left:20px}25%{transform:translate(0,166.66667px);opacity:.75}30%{margin-left:15px}40%{margin-left:0}50%{transform:translate(0,466.66667px);opacity:1;margin-left:-15px}60%{margin-left:-20px}70%{margin-left:-15px}75%{transform:translate(0,800px);opacity:.5}80%{margin-left:0}100%{transform:translate(0,1000px);opacity:0}}
Và sau đó chèn đoạn này xuống dưới thẻ <body> hoặc trên thẻ </body>
Hiển thị hoa mai
<span class="g-snows" id="jsi-snows"><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai><hoamai></hoamai></span>
Hiển thị hoa đào
<span class="g-snows" id="jsi-snows"><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao><hoadao></hoadao></span>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent