Sắp đến Noel , để đón noel và có thêm không khí mùa đông tại sao chúng ta không tạo ra hiệu ứng tuyết rơi tô điểm cho blog hay website của bạn. Bạn sẽ có một website lung linh .đón giáng sinh .
Chỉ với 1 thao tác đơn giản là bạn có thể thưởng thức khung cảnh tuyết rơi trên website của bạn.
Dán thêm đoạn mã sau đây vào phía sau thẻ <body> và lưu lại , sau đó refresh lại website và chờ 1 chút là thấy tuyết băt đầu rơi, lưu ý là nền website màu tối thì nhìn sẽ rõ tuyết hơn là nền màu sáng.
Bước 2 : Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa sau : <body> rất đơn giản, chỉ cần copy paste đoạn mã dưới đây vào phía dưới thẻ <body> là được.
Chỉ với 1 thao tác đơn giản là bạn có thể thưởng thức khung cảnh tuyết rơi trên website của bạn.
Dán thêm đoạn mã sau đây vào phía sau thẻ <body> và lưu lại , sau đó refresh lại website và chờ 1 chút là thấy tuyết băt đầu rơi, lưu ý là nền website màu tối thì nhìn sẽ rõ tuyết hơn là nền màu sáng.
Chèn hiệu ứng tuyết rơi CSS3 và Javascript trong Blogspot.
Bước 1 : Đăng nhập vào Blogger Dashboard, rồi chọn Template -> Edit Html .Bước 2 : Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa sau : <body> rất đơn giản, chỉ cần copy paste đoạn mã dưới đây vào phía dưới thẻ <body> là được.
<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>
Từ khoá:
Blogger
Hiệu Ứng Tuyết Rơi
Thủ thuật Blogspot
Blog cua em sao không hiển thị được nè
ReplyDeleteBlog nào vậy bạn
Delete