Tiện ích tuyết rơi đẹp cho blog 1

Tiện ích tuyết rơi đẹp cho blogspot

Rất đơn giản!
Chỉ cần copy code dưới đây rồi dán vào khung nội dung của tiện ích HTML/Javascrpit và lưu lại là xong!
Có thể xem trước tuyết rơi của tiện ích ngay trong bài đăng này!


Code:

<style class="giangna_styles">body{width:100vw;height:100vh;margin:0;background-image:url("http://im03.thewallpapers.org/photo/76194/2-winter-tree-and-snow.jpg");background-size:cover;background-repeat:no-repeat;background-position:top right;background-attachment:fixed}
.snow{position:absolute;width:5px;height:5px;margin:auto;top:0;right:0;bottom:0;left:0;border-radius:50%;-webkit-animation:snow 10000ms linear infinite;animation:snow 10000ms linear infinite}
.snow:nth-child(2){left:200px;-webkit-animation-delay:6666.66667ms;animation-delay:6666.66667ms}
.snow:nth-child(3){right:200px;-webkit-animation-delay:3333.33333ms;animation-delay:3333.33333ms}
@-webkit-keyframes snow{0%{box-shadow:86vw -104vh 1px 4px #fff,10vw -143vh 6px 4px #fff,56vw -51vh 2px 2px #fff,-78vw -106vh 3px 1px #fff,22vw -90vh 4px 5px #fff,-53vw -87vh 7px 1px #fff,-20vw -112vh 5px 1px #fff,-20vw -76vh 5px 1px #fff,49vw -101vh 5px 2px #fff,-22vw -128vh 1px 1px #fff,39vw -134vh 6px 2px #fff,-23vw -120vh 1px 2px #fff,19vw -53vh 8px 5px #fff,-25vw -92vh 1px 3px #fff,62vw -63vh 6px 1px #fff,-33vw -97vh 1px 5px #fff,85vw -149vh 7px 5px #fff,-96vw -146vh 6px 4px #fff,10vw -79vh 8px 2px #fff,10vw -119vh 4px 3px #fff,0vw -116vh 1px 4px #fff,-78vw -59vh 8px 2px #fff,98vw -74vh 8px 4px #fff,-13vw -53vh 7px 3px #fff,45vw -108vh 7px 1px #fff,19vw -139vh 3px 5px #fff,32vw -140vh 4px 3px #fff,-80vw -136vh 1px 1px #fff,21vw -65vh 5px 3px #fff,-97vw -70vh 4px 5px #fff,-19vw -55vh 1px 4px #fff,-37vw -103vh 6px 1px #fff,21vw -52vh 7px 5px #fff,-29vw -91vh 7px 2px #fff,2vw -110vh 5px 3px #fff,-55vw -136vh 4px 3px #fff,35vw -100vh 8px 1px #fff,-63vw -137vh 6px 1px #fff,43vw -62vh 4px 4px #fff,-72vw -129vh 4px 4px #fff,49vw -126vh 7px 3px #fff,-52vw -59vh 5px 5px #fff,2vw -131vh 3px 1px #fff,-4vw -130vh 5px 5px #fff,-7vw -74vh 3px 5px #fff,14vw -72vh 5px 5px #fff,-16vw -147vh 3px 5px #fff,-72vw -122vh 2px 3px #fff,-10vw -82vh 8px 4px #fff,-53vw -76vh 8px 3px #fff,-3vw -111vh 6px 1px #fff,-91vw -134vh 4px 1px #fff,5vw -110vh 6px 4px #fff,-27vw -140vh 1px 2px #fff,82vw -76vh 7px 5px #fff,-30vw -71vh 2px 5px #fff,45vw -111vh 4px 1px #fff,0vw -123vh 1px 5px #fff,11vw -70vh 7px 1px #fff,-43vw -99vh 4px 5px #fff,-5vw -115vh 8px 1px #fff,-64vw -149vh 2px 2px #fff,34vw -142vh 8px 5px #fff,-85vw -127vh 1px 5px #fff,8vw -53vh 6px 5px #fff,-82vw -60vh 6px 2px #fff,2vw -116vh 7px 4px #fff,-41vw -51vh 8px 5px #fff,23vw -80vh 1px 5px #fff,-68vw -98vh 1px 4px #fff,2vw -79vh 8px 5px #fff,-39vw -60vh 8px 2px #fff,17vw -94vh 4px 3px #fff,-80vw -135vh 6px 2px #fff,88vw -56vh 2px 4px #fff,-95vw -59vh 8px 4px #fff,81vw -143vh 2px 5px #fff,-8vw -112vh 1px 2px #fff}100%{box-shadow:3vw 85vh 4px 4px #fff,2vw 57vh 4px 3px #fff,13vw 76vh 2px 2px #fff,-98vw 54vh 4px 3px #fff,57vw 96vh 3px 4px #fff,-74vw 75vh 8px 3px #fff,65vw 94vh 2px 5px #fff,-87vw 103vh 2px 3px #fff,95vw 60vh 8px 3px #fff,-77vw 138vh 4px 4px #fff,46vw 132vh 4px 2px #fff,-99vw 89vh 3px 4px #fff,73vw 98vh 6px 4px #fff,-76vw 113vh 1px 5px #fff,93vw 144vh 5px 5px #fff,-26vw 122vh 2px 2px #fff,-4vw 115vh 8px 2px #fff,-4vw 95vh 3px 5px #fff,62vw 100vh 3px 5px #fff,-8vw 116vh 1px 1px #fff,32vw 59vh 7px 5px #fff,-11vw 140vh 8px 3px #fff,11vw 77vh 8px 3px #fff,-76vw 82vh 2px 3px #fff,44vw 123vh 1px 1px #fff,-18vw 117vh 3px 4px #fff,-9vw 102vh 7px 4px #fff,-71vw 79vh 1px 3px #fff,41vw 106vh 3px 1px #fff,0vw 77vh 8px 5px #fff,81vw 80vh 1px 2px #fff,-89vw 58vh 8px 1px #fff,62vw 70vh 5px 3px #fff,18vw 51vh 8px 2px #fff,-14vw 116vh 5px 4px #fff,1vw 66vh 8px 4px #fff,58vw 72vh 4px 4px #fff,-60vw 52vh 1px 4px #fff,6vw 57vh 1px 1px #fff,-87vw 56vh 1px 5px #fff,36vw 97vh 4px 1px #fff,-41vw 147vh 6px 5px #fff,49vw 115vh 4px 1px #fff,-16vw 122vh 3px 2px #fff,87vw 64vh 3px 4px #fff,-43vw 108vh 4px 3px #fff,-1vw 117vh 1px 1px #fff,-94vw 83vh 7px 1px #fff,92vw 51vh 3px 5px #fff,-100vw 82vh 6px 3px #fff,84vw 98vh 8px 4px #fff,16vw 67vh 4px 3px #fff,11vw 77vh 8px 1px #fff,-14vw 102vh 1px 3px #fff,-5vw 103vh 5px 3px #fff,4vw 133vh 2px 5px #fff,91vw 133vh 4px 2px #fff,1vw 126vh 3px 3px #fff,0vw 88vh 1px 5px #fff,-60vw 132vh 3px 2px #fff,52vw 149vh 6px 4px #fff,-10vw 127vh 3px 5px #fff,5vw 64vh 8px 5px #fff,-95vw 79vh 8px 2px #fff,-15vw 116vh 5px 3px #fff,-20vw 133vh 1px 5px #fff,-19vw 139vh 3px 2px #fff,9vw 146vh 1px 1px #fff,49vw 118vh 4px 4px #fff,-7vw 110vh 4px 1px #fff,23vw 141vh 8px 4px #fff,10vw 81vh 4px 3px #fff,29vw 142vh 3px 2px #fff,-82vw 91vh 5px 1px #fff,99vw 83vh 2px 1px #fff,18vw 147vh 6px 4px #fff,97vw 86vh 4px 5px #fff,-60vw 112vh 6px 4px #fff}}
@keyframes snow{0%{box-shadow:86vw -104vh 1px 4px #fff,10vw -143vh 6px 4px #fff,56vw -51vh 2px 2px #fff,-78vw -106vh 3px 1px #fff,22vw -90vh 4px 5px #fff,-53vw -87vh 7px 1px #fff,-20vw -112vh 5px 1px #fff,-20vw -76vh 5px 1px #fff,49vw -101vh 5px 2px #fff,-22vw -128vh 1px 1px #fff,39vw -134vh 6px 2px #fff,-23vw -120vh 1px 2px #fff,19vw -53vh 8px 5px #fff,-25vw -92vh 1px 3px #fff,62vw -63vh 6px 1px #fff,-33vw -97vh 1px 5px #fff,85vw -149vh 7px 5px #fff,-96vw -146vh 6px 4px #fff,10vw -79vh 8px 2px #fff,10vw -119vh 4px 3px #fff,0vw -116vh 1px 4px #fff,-78vw -59vh 8px 2px #fff,98vw -74vh 8px 4px #fff,-13vw -53vh 7px 3px #fff,45vw -108vh 7px 1px #fff,19vw -139vh 3px 5px #fff,32vw -140vh 4px 3px #fff,-80vw -136vh 1px 1px #fff,21vw -65vh 5px 3px #fff,-97vw -70vh 4px 5px #fff,-19vw -55vh 1px 4px #fff,-37vw -103vh 6px 1px #fff,21vw -52vh 7px 5px #fff,-29vw -91vh 7px 2px #fff,2vw -110vh 5px 3px #fff,-55vw -136vh 4px 3px #fff,35vw -100vh 8px 1px #fff,-63vw -137vh 6px 1px #fff,43vw -62vh 4px 4px #fff,-72vw -129vh 4px 4px #fff,49vw -126vh 7px 3px #fff,-52vw -59vh 5px 5px #fff,2vw -131vh 3px 1px #fff,-4vw -130vh 5px 5px #fff,-7vw -74vh 3px 5px #fff,14vw -72vh 5px 5px #fff,-16vw -147vh 3px 5px #fff,-72vw -122vh 2px 3px #fff,-10vw -82vh 8px 4px #fff,-53vw -76vh 8px 3px #fff,-3vw -111vh 6px 1px #fff,-91vw -134vh 4px 1px #fff,5vw -110vh 6px 4px #fff,-27vw -140vh 1px 2px #fff,82vw -76vh 7px 5px #fff,-30vw -71vh 2px 5px #fff,45vw -111vh 4px 1px #fff,0vw -123vh 1px 5px #fff,11vw -70vh 7px 1px #fff,-43vw -99vh 4px 5px #fff,-5vw -115vh 8px 1px #fff,-64vw -149vh 2px 2px #fff,34vw -142vh 8px 5px #fff,-85vw -127vh 1px 5px #fff,8vw -53vh 6px 5px #fff,-82vw -60vh 6px 2px #fff,2vw -116vh 7px 4px #fff,-41vw -51vh 8px 5px #fff,23vw -80vh 1px 5px #fff,-68vw -98vh 1px 4px #fff,2vw -79vh 8px 5px #fff,-39vw -60vh 8px 2px #fff,17vw -94vh 4px 3px #fff,-80vw -135vh 6px 2px #fff,88vw -56vh 2px 4px #fff,-95vw -59vh 8px 4px #fff,81vw -143vh 2px 5px #fff,-8vw -112vh 1px 2px #fff}100%{box-shadow:3vw 85vh 4px 4px #fff,2vw 57vh 4px 3px #fff,13vw 76vh 2px 2px #fff,-98vw 54vh 4px 3px #fff,57vw 96vh 3px 4px #fff,-74vw 75vh 8px 3px #fff,65vw 94vh 2px 5px #fff,-87vw 103vh 2px 3px #fff,95vw 60vh 8px 3px #fff,-77vw 138vh 4px 4px #fff,46vw 132vh 4px 2px #fff,-99vw 89vh 3px 4px #fff,73vw 98vh 6px 4px #fff,-76vw 113vh 1px 5px #fff,93vw 144vh 5px 5px #fff,-26vw 122vh 2px 2px #fff,-4vw 115vh 8px 2px #fff,-4vw 95vh 3px 5px #fff,62vw 100vh 3px 5px #fff,-8vw 116vh 1px 1px #fff,32vw 59vh 7px 5px #fff,-11vw 140vh 8px 3px #fff,11vw 77vh 8px 3px #fff,-76vw 82vh 2px 3px #fff,44vw 123vh 1px 1px #fff,-18vw 117vh 3px 4px #fff,-9vw 102vh 7px 4px #fff,-71vw 79vh 1px 3px #fff,41vw 106vh 3px 1px #fff,0vw 77vh 8px 5px #fff,81vw 80vh 1px 2px #fff,-89vw 58vh 8px 1px #fff,62vw 70vh 5px 3px #fff,18vw 51vh 8px 2px #fff,-14vw 116vh 5px 4px #fff,1vw 66vh 8px 4px #fff,58vw 72vh 4px 4px #fff,-60vw 52vh 1px 4px #fff,6vw 57vh 1px 1px #fff,-87vw 56vh 1px 5px #fff,36vw 97vh 4px 1px #fff,-41vw 147vh 6px 5px #fff,49vw 115vh 4px 1px #fff,-16vw 122vh 3px 2px #fff,87vw 64vh 3px 4px #fff,-43vw 108vh 4px 3px #fff,-1vw 117vh 1px 1px #fff,-94vw 83vh 7px 1px #fff,92vw 51vh 3px 5px #fff,-100vw 82vh 6px 3px #fff,84vw 98vh 8px 4px #fff,16vw 67vh 4px 3px #fff,11vw 77vh 8px 1px #fff,-14vw 102vh 1px 3px #fff,-5vw 103vh 5px 3px #fff,4vw 133vh 2px 5px #fff,91vw 133vh 4px 2px #fff,1vw 126vh 3px 3px #fff,0vw 88vh 1px 5px #fff,-60vw 132vh 3px 2px #fff,52vw 149vh 6px 4px #fff,-10vw 127vh 3px 5px #fff,5vw 64vh 8px 5px #fff,-95vw 79vh 8px 2px #fff,-15vw 116vh 5px 3px #fff,-20vw 133vh 1px 5px #fff,-19vw 139vh 3px 2px #fff,9vw 146vh 1px 1px #fff,49vw 118vh 4px 4px #fff,-7vw 110vh 4px 1px #fff,23vw 141vh 8px 4px #fff,10vw 81vh 4px 3px #fff,29vw 142vh 3px 2px #fff,-82vw 91vh 5px 1px #fff,99vw 83vh 2px 1px #fff,18vw 147vh 6px 4px #fff,97vw 86vh 4px 5px #fff,-60vw 112vh 6px 4px #fff}}
</style>
<canvas class="snow" id="snow" style=" position: fixed; z-index: 9;"></canvas>
<div class="snow-wrap" style=" position: fixed; z-index: 9;"><div class="snow"></div><div class="snow"></div><div class="snow"></div></div>
<script type='text/javascript'>
//<![CDATA[
(function(){function ready(fn){if(document.readyState!='loading'){fn()}else{document.addEventListener('DOMContentLoaded',fn)}}function makeSnow(el){var ctx=el.getContext('2d');var width=0;var height=0;var particles=[];var Particle=function(){this.x=this.y=this.dx=this.dy=0;this.reset()}Particle.prototype.reset=function(){this.y=Math.random()*height;this.x=Math.random()*width;this.dx=(Math.random()*1)-0.5;this.dy=(Math.random()*0.5)+0.5}function createParticles(count){if(count!=particles.length){particles=[];for(var i=0;i<count;i++){particles.push(new Particle())}}}function onResize(){width=window.innerWidth;height=window.innerHeight;el.width=width;el.height=height;createParticles((width*height)/10000)}function updateParticles(){ctx.clearRect(0,0,width,height);ctx.fillStyle='#f6f9fa';particles.forEach(function(particle){particle.y+=particle.dy;particle.x+=particle.dx;if(particle.y>height){particle.y=0}if(particle.x>width){particle.reset();particle.y=0}ctx.beginPath();ctx.arc(particle.x,particle.y,5,0,Math.PI*2,false);ctx.fill()});window.requestAnimationFrame(updateParticles)}onResize();updateParticles();window.addEventListener('resize',onResize)}ready(function(){var canvas=document.getElementById('snow');makeSnow(canvas)})})();
//]]>
</script>

Nguồn:
https://www.giangna.com/2016/12/code-tao-hieu-ung-tuyet-roi-dep-cho-blogger.html