Реалистичный дождь из облака на CSS3 и HTML5 Canvas
|
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 |
body { margin: 0px; overflow: hidden; } .cloud { background: white; width: 340px; height: 110px; position: absolute; top: 130px; left: 50%; margin-left: -170px; z-index: 100; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-animation: float 2s 0s infinite alternate linear; animation: float 2s 0s infinite alternate linear; border-radius: 50%; } .cloud:before { content: ""; width: 200px; height: 150px; border-radius: 100%; position: absolute; background: white; top: -20px; left: -10px; } .cloud:after { content: ""; width: 170px; height: 170px; border-radius: 100%; position: absolute; background: white; right: -10px; top: -40px; } .cloudy { width: 200px; height: 150px; border-radius: 100%; position: absolute; background: white; right: -10px; top: 30px; } .cloudy:before { content: ""; width: 150px; height: 120px; border-radius: 100%; position: absolute; background: white; top: 20px; left: -100px; } @-webkit-keyframes float { from { -webkit-transform: translate(0, -70%); transform: translate(0, -70%); } to { -webkit-transform: translate(-1%, -70%); transform: translate(-1%, -70%); } } @keyframes float { from { -webkit-transform: translate(0, -70%); transform: translate(0, -70%); } to { -webkit-transform: translate(-1%, -70%); transform: translate(-1%, -70%); } } |
|
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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<canvas id="canvas"></canvas> <div class="cloud"> <div class="cloudy"></div> </div> <script> requestAnimFrame = (function() { return function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var width = 0; var height = 0; var ltp = window.innerWidth / 2 - 170 window.onresize = function onresize() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; ltp = window.innerWidth / 2 - 170; } window.onresize(); var mouse = { X: 0, Y: 0 } window.onmousemove = function onmousemove(event) { mouse.X = event.clientX; mouse.Y = event.clientY; } var particles = []; var drops = []; function Rain(X, Y, i) { if (!i) { i = 2; } while (i--) { particles.push({ deltaX: (Math.random() * 0.25), deltaY: (Math.random() * 9) + 1, X: X, Y: 110 + Y, alpha: 1, col: "hsla(200,100%,80%,1)", }) } } function explosion(X, Y, col, i) { if (!i) { i = 5; } while (i--) { drops.push({ deltaX: (Math.random() * 4 - 2), deltaY: (Math.random() * -4), X: X, Y: Y, radius: 0.7 + Math.floor(Math.random() * 1.4), alpha: 1, colour: col }) } } function render(ctx) { ctx.save(); var grd = ctx.createLinearGradient(width / 2, 0, width / 2, height); grd.addColorStop(0, "rgba(63,76,107,1)"); grd.addColorStop(1, "rgba(79,115,135,1)"); ctx.fillStyle = grd; ctx.fillRect(0, 0, width, height); var visibleParticles = particles; var visibleDrops = drops; var tau = Math.PI * 2; for (var i = 0, activeParticles; activeParticles = visibleParticles[i]; i++) { ctx.globalAlpha = activeParticles.alpha; ctx.fillStyle = activeParticles.col; ctx.fillRect(activeParticles.X, activeParticles.Y, activeParticles.deltaY / 4, activeParticles.deltaY); } for (var i = 0, activeDrops; activeDrops = visibleDrops[i]; i++) { ctx.globalAlpha = activeDrops.alpha; ctx.fillStyle = activeDrops.col; ctx.beginPath(); ctx.arc(activeDrops.X, activeDrops.Y, activeDrops.radius, 0, tau); ctx.fill(); } ctx.strokeStyle = "black"; ctx.lineWidth = 1; ctx.restore(); } function update() { var visibleParticles = particles; var visibleDrops = drops; for (var i = 0, activeParticles; activeParticles = visibleParticles[i]; i++) { activeParticles.X += activeParticles.deltaX; activeParticles.Y += activeParticles.deltaY + 5; if (activeParticles.Y > height - 15) { visibleParticles.splice(i--, 1); explosion(activeParticles.X, activeParticles.Y, activeParticles.col); } } for (var i = 0, activeDrops; activeDrops = visibleDrops[i]; i++) { activeDrops.X += activeDrops.deltaX; activeDrops.Y += activeDrops.deltaY; activeDrops.radius -= 0.075; if (activeDrops.alpha > 0) { activeDrops.alpha -= 0.005; } else { activeDrops.alpha = 0; } if (activeDrops.radius < 0) { visibleDrops.splice(i--, 1); } } var i = 2; while (i--) { Rain(ltp + Math.floor((Math.random() * 340)), -15); } } (function start() { requestAnimFrame(start); update(); render(ctx); })(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
