Breaking News

Trang Trí Blog nhân Dịp Giáng Sinh

06:45
Không khí giáng sinh đang tràn ngập khắp đường phố , mọi nhà đều đang trang trí cho nhà cửa , đường phố đẹp lung linh với đủ loại màu sắc .Còn ngôi nhà Blog của bạn đã trang hoàng gì chưa? Thủ thuật nhỏ sau đây sẽ giúp bạn trang trí ngôi nhà ảo của bạn thật đẹp với hiệu ứng tuyết rơi và cây thông Noel . Chúc các bạn một mùa giáng sinh an lành  và ngập tràn hồng ân của Thiên Chúa.


HƯỚNG DẪN :Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa  : </body>, sau đó chọn một trong những đoạn code dưới đây và dán  trên thẻ </body> là xong.
1.Hình nền cây thông và chuông ở hai bên Blog

<style type='text/css'>html{height:auto!important}</style><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCbHq06R5VODqz5fn3Yb02Zmeb1PAd7ch5nhyphenhyphenBpHOctp1A3HzyKIpNowUjbfluZ0CvY2g5CVIE3b5QvKmgYyDcO2IY1O31pxJuqJF7VV_-iWcxVI27OJUEhd2kaYfctrpyn6HQteLAi5A/s150/top-left.png' style='position:fixed;z-index:9999;top:0;left:0'/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PT4Elz51TC61eiQcqF5unzu3YNKBBLie28YiKifokf3nrvL1MR0l_uvXLCQshsascTvYK-4-4LCmx060qqLj1OuyCihCCiYv8uDJf-mZCSmPWxmd0xCXws52_03mp4TdOAEukpv_umk/s150/top-right.png' style='position:fixed;z-index:9999;top:0;right:0'/>

2.Tạo bông tuyết màu xanh rơi


<script type='text/javascript'>
//<![CDATA[
var SNOW_Picture="http://3.bp.blogspot.com/-YFWWvMkicLI/UrRmxFseoLI/AAAAAAAABEI/lxsGIUsIFxk/s1600/snow.png";var SNOW_no=56;var SNOW_browser_IE_NS=(document.body.clientHeight)?1:0;var SNOW_browser_MOZ=(self.innerWidth)?1:0;var SNOW_browser_IE7=(document.documentElement.clientHeight)?1:0;var SNOW_Time;var SNOW_dx,SNOW_xp,SNOW_yp;var SNOW_am,SNOW_stx,SNOW_sty;var i,SNOW_Browser_Width,SNOW_Browser_Height;if(SNOW_browser_IE_NS){SNOW_Browser_Width=document.body.clientWidth;SNOW_Browser_Height=document.body.clientHeight;}else{if(SNOW_browser_MOZ){SNOW_Browser_Width=self.innerWidth-20;SNOW_Browser_Height=self.innerHeight;}else{if(SNOW_browser_IE7){SNOW_Browser_Width=document.documentElement.clientWidth;SNOW_Browser_Height=document.documentElement.clientHeight;}}}SNOW_dx=new Array();SNOW_xp=new Array();SNOW_yp=new Array();SNOW_am=new Array();SNOW_stx=new Array();SNOW_sty=new Array();for(i=0;i<SNOW_no;++i){SNOW_dx[i]=0;SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-50);SNOW_yp[i]=Math.random()*SNOW_Browser_Height;SNOW_am[i]=Math.random()*20;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();if(i==0){document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>');}else{document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>');}}function SNOW_Weather(){for(i=0;i<SNOW_no;++i){SNOW_yp[i]+=SNOW_sty[i];if(SNOW_yp[i]>SNOW_Browser_Height-50){SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);SNOW_yp[i]=0;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();}SNOW_dx[i]+=SNOW_stx[i];document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i]+SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";}SNOW_Time=setTimeout("SNOW_Weather()",20);}SNOW_Weather();
//]]>
</script>
  • Các bạn có thể thay đổi đoạn code màu vàng thành hình mà các bạn muốn hiển thị thay cho bông tuyết màu xanh mà mình đặt trong bài viết này.
  • Thay đổi chữ số trong đoạn code màu xanh để tăng giảm số lượng bông tuyết rơi.
2.Tạo hiệu ứng bông tuyết rơi bằng CSS3 Snow Animation
<style>.snow-container{position:absolute;height:100vh;width:100%;max-width:100%;top:0;overflow:hidden;z-index:2;pointer-events:none} .snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} .snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:15s} .snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s} .snow.middleground{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);-webkit-animation-duration:20s;animation-duration:20s} .snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} .snow.background{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);-webkit-animation-duration:25s;animation-duration:25s} .snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} @-webkit-keyframes snow{ 0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)} } @keyframes snow{ 0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)} 100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}</style> <div class='snow-container'><div class='snow foreground'/><div class='snow foreground layered'/><div class='snow middleground'/><div class='snow middleground layered'/><div class='snow background'/><div class='snow background layered'/></div>
Chúc các bạn thành công

Không có nhận xét nào

Đăng ký: Đăng Nhận xét ( Atom )