Снегопад в шапке с таящими снежинками на SVG, CSS3 и Javascript
|
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 |
.svg-snowscene { width: 100%; } .snow { fill: #fff; animation-name: snowing; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-out; } .snow:nth-child(2n) { animation-delay: 1.5s; } .snow:nth-child(3n) { animation-delay: 2.3s; animation-duration: 3.3s; } .snow:nth-child(4n) { animation-delay: 0.8s; animation-duration: 3.2s; } .snow:nth-child(5n) { animation-delay: 2.8s; } @keyframes snowing { 0% { fill-opacity: 1; } 100% { fill-opacity: 0; transform: translateY(200px); } } |
|
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 |
<svg class="svg-snowscene" xmlns="http://www.w3.org/2000/svg"> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> <circle class="snow" /> </svg> <script> function getRandom(min, max) { return Math.random() * (max - min) + min; } (function letItSnow() { var snowflakes = document.querySelectorAll('.snow'); for (var i = 0; i < snowflakes.length; i++) { var snowflake = snowflakes[i]; snowflake.setAttribute('cx', getRandom(1, 100) + '%'); snowflake.setAttribute('cy', '-' + getRandom(1, 100)); snowflake.setAttribute('r', getRandom(1, 3)); } })(); </script> |
