Преимущество данного варианта:
Снежинки не мельтешат и не летают, отвлекая тем самым от информации.
Легко настроить количество снежинок, к примеру можно оставить всего одну в углу страницы.
Можно расположить снежинки в нужном месте, чтобы они не перекрывали логотип или другие участки сайта
Не используется JavaScript
HTML
HTML-код лучше разместить внизу страницы
|
1 2 3 |
<div class="fixed-snow"> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
.fixed-snow span::after { position:fixed; color:#BFE2FF; font-weight:bold; pointer-events: none; z-index: 1000; } .fixed-snow span:nth-child(even)::after { content: "\2744"; } .fixed-snow span:nth-child(odd)::after { content: "\2745"; } .fixed-snow span:nth-child(1)::after { font-size:40px; bottom:4%; left:4%; animation: snowzoom 2s linear infinite; } .fixed-snow span:nth-child(2)::after { font-size:48px; bottom:6%; right:6%; animation: snowzoom 3s ease-in infinite; } .fixed-snow span:nth-child(3)::after { font-size:32px; bottom:10%; left:45%; animation: snowzoom 4s linear infinite; } .fixed-snow span:nth-child(4)::after { font-size:44px; bottom:40%; left:20%; animation: snowzoom 3s ease-in-out infinite; } .fixed-snow span:nth-child(5)::after { font-size:42px; top:16%; left:8%; animation: snowzoom 3.2s ease-out infinite; } .fixed-snow span:nth-child(6)::after { font-size:30px; top:20%; right:8%; animation: snowzoom 2.2s ease infinite; } .fixed-snow span:nth-child(7)::after { font-size:50px; top:50%; left:50%; animation: snowzoom 2.4s linear infinite; } .fixed-snow span:nth-child(8)::after { font-size:32px; top:26%; right:28%; animation: snowzoom 1.8s ease-in-out infinite; } .fixed-snow span:nth-child(9)::after { font-size:42px; top:12%; left:58%; animation: snowzoom 3.2s linear infinite; } .fixed-snow span:nth-child(10)::after { font-size:46px; bottom:30%; right:24%; animation: snowzoom 2s ease infinite; } .fixed-snow span:nth-child(11)::after { font-size:38px; bottom:22%; left:14%; animation: snowzoom 3s ease-in infinite; } .fixed-snow span:nth-child(12)::after { font-size:28px; bottom:28%; left:40%; animation: snowzoom 2.8s ease-out infinite; } .fixed-snow span:nth-child(13)::after { font-size:22px; top:24%; left:20%; animation: snowzoom 2.4s ease infinite; } .fixed-snow span:nth-child(14)::after { font-size:42px; top:30%; left:38%; animation: snowzoom 2.4s ease-in infinite; } @keyframes snowzoom { 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1); } } |
Что то не получается установить
Скорее всего фон сайта перекрывает.
Попробуйте z-index поставить большой.
Я подправил код.
Прикольно)