Tổng hợp một số code trang trí tết cho blogspot của bạn

Cũng gần tới Noel và sau Noel là tết, cho nên cũng phải tranh thủ đi sưu tầm một số thứ về viết bài cho anh em còn chơi dần dần từ đây tới tết :)

Code treo nhành mai trên cùng Blog

Các bạn chèn code sau phía trên thẻ đóng </head>

<link href='http://cdn.rawgit.com/tuan2308/css/master/tet.css' rel='stylesheet' type='text/css'/>
<script src='http://cdn.rawgit.com/tuan2308/js/master/swfobject.js' type='text/javascript'/>
<script src='http://cdn.rawgit.com/tuan2308/js/master/swfobject.min.js' type='text/javascript'/>
<script src='http://cdn.rawgit.com/tuan2308/js/master/holiday_bells.js' type='text/javascript'/>

Sau đó chèn code sau sau thẻ mở <body>

<div class='b-page_newyear'>
<div class='b-page__content'>
<i class='b-head-decor'>
<i class='b-head-decor__inner b-head-decor__inner_n1'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>
<i class='b-head-decor__inner b-head-decor__inner_n2'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>
<i class='b-head-decor__inner b-head-decor__inner_n3'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>
<i class='b-head-decor__inner b-head-decor__inner_n4'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>
<i class='b-head-decor__inner b-head-decor__inner_n5'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>
<i class='b-head-decor__inner b-head-decor__inner_n6'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>
<i class='b-head-decor__inner b-head-decor__inner_n7'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>
</i>
</div>
</div>

Code treo câu đối 2 bên Blog và không khí tết cuối Blog

Các bạn bỏ code này vào Widget

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">html{height:auto!important}body{background:#EEE;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="CÂU ĐỐI TRÁI"/><img style="position:fixed;z-index:9999;top:0;right:0" src="CÂU ĐỐI PHẢI"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:220px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIOvT7W5Ec7mvfHN103s7ghsPYAPzZoYfTMtvTW_lxPmf7AyJEnSBXPCtBvlya39tbPG-rxPo9lDVrxCewdZO61V34TN-fdVvXdxjV-XvKiZCsOjJn3JnMjXSGjCLo278cBkAJWYnNHk/s1600/bottom.png) repeat-x bottom left;"></div><a href="/" target="_blank"><img style="position:fixed;z-index:9999;bottom:19px;left:280px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH21RhA6qoshMBlN_rCMTE8_Rep4DNiJdOjA050BcbUrbwm_CrnGd-1lRklN63Vuf1zNfBC60vQTyQTQyZQbL5LlVU-e3rmOPBTHe_SOfTw2dbnwXvAcH1JFIIXiMSOWJoT5QV2p4USNo/s1600/buttom-left.png"/>');
var no=100,hidesnowtime=0,snowdistance="pageheight",ie4up=document.all?1:0,ns6up=document.getElementById&&!document.all?1:0;function iecompattest(){return document.compatMode&&"BackCompat"!=document.compatMode?document.documentElement:document.body}var dx,xp,yp,am,stx,sty,i,doc_width=800,doc_height=600;ns6up?(doc_width=self.innerWidth,doc_height=self.innerHeight):ie4up&&(doc_width=iecompattest().clientWidth,doc_height=iecompattest().clientHeight);dx=[];xp=[];yp=[];am=[];stx=[];sty=[];
for(i=0;i<no;++i)dx[i]=0,xp[i]=Math.random()*(doc_width-50),yp[i]=Math.random()*doc_height,am[i]=20*Math.random(),stx[i]=0.02+Math.random()/10,sty[i]=0.7+Math.random(),(ie4up||ns6up)&&document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"></div>');
//]]>
</script>

Code treo một nhành đào trượt dọc bên trái Blog đơn giản

Các bạn bỏ code này vào Widget

<a style="display:scroll;position:fixed;Top:0px;left:5px;" href="http://www.hanhhuong.info/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjAwJ6KQjj_5yz1UgH5CdnIK68uUMj3NZbc7r3x_pI7gz-OpnQJfeAgY6arqdhpqs7UM7nxFcQDngESHL8tlTLjgKz2fLCRzA7_Sajy-XxziXsiynNmmsQSWGN1kt42RY_kSrSKu9o_gs/s200/hoadao.png" /></a>

Code pháo hoa cho Blog

Các bạn dán đoạn code này trên thẻ đóng </head> nhé!

<script type="text/javascript" src="http://yourjavascript.com/721331142313/siinblog.js"></script>

Code hiệu ứng hoa đào rơi toàn Blog

Các bạn dán đoạn code này trên thẻ đóng </head> hoặc </body> nhé!

<style>
@-webkit-keyframes fall {
0% {
opacity: .9;
top: 0
}
100% {
opacity: .2;
top: 100%
}
}
@-o-keyframes fall {
0% {
opacity: .9;
top: 0
}
100% {
opacity: .2;
top: 100%
}
}
@-ms-keyframes fall {
0% {
opacity: .9;
top: 0
}
100% {
opacity: .2;
top: 100%
}
}
@-moz-keyframes fall {
0% {
opacity: .9;
top: 0
}
100% {
opacity: .2;
top: 100%
}
}
@keyframes fall {
0% {
opacity: .9;
top: 0
}
100% {
opacity: .2;
top: 100%
}
}
@-webkit-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-o-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-ms-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-moz-keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@keyframes blow-soft-left {
0% {
margin-left: 0
}
100% {
margin-left: -50%
}
}
@-webkit-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-o-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-ms-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-moz-keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@keyframes blow-medium-left {
0% {
margin-left: 0
}
100% {
margin-left: -100%
}
}
@-webkit-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-o-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-ms-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-moz-keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@keyframes blow-soft-right {
0% {
margin-left: 0
}
100% {
margin-left: 50%
}
}
@-webkit-keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-o-keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-ms-keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-moz-keyframes blow-medium-lerightft {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@keyframes blow-medium-right {
0% {
margin-left: 0
}
100% {
margin-left: 100%
}
}
@-webkit-keyframes sway-0 {
0% {
-webkit-transform: rotate(-5deg)
}
40% {
-webkit-transform: rotate(28deg)
}
100% {
-webkit-transform: rotate(3deg)
}
}
@-o-keyframes sway-0 {
0% {
-o-transform: rotate(-5deg)
}
40% {
-o-transform: rotate(28deg)
}
100% {
-o-transform: rotate(3deg)
}
}
@-ms-keyframes sway-0 {
0% {
-ms-transform: rotate(-5deg)
}
40% {
-ms-transform: rotate(28deg)
}
100% {
-ms-transform: rotate(3deg)
}
}
@-moz-keyframes sway-0 {
0% {
-moz-transform: rotate(-5deg)
}
40% {
-moz-transform: rotate(28deg)
}
100% {
-moz-transform: rotate(3deg)
}
}
@keyframes sway-0 {
0% {
transform: rotate(-5deg)
}
40% {
transform: rotate(28deg)
}
100% {
transform: rotate(3deg)
}
}
@-webkit-keyframes sway-1 {
0% {
-webkit-transform: rotate(10deg)
}
40% {
-webkit-transform: rotate(43deg)
}
100% {
-webkit-transform: rotate(15deg)
}
}
@-o-keyframes sway-1 {
0% {
-o-transform: rotate(10deg)
}
40% {
-o-transform: rotate(43deg)
}
100% {
-o-transform: rotate(15deg)
}
}
@-ms-keyframes sway-1 {
0% {
-ms-transform: rotate(10deg)
}
40% {
-ms-transform: rotate(43deg)
}
100% {
-ms-transform: rotate(15deg)
}
}
@-moz-keyframes sway-1 {
0% {
-moz-transform: rotate(10deg)
}
40% {
-moz-transform: rotate(43deg)
}
100% {
-moz-transform: rotate(15deg)
}
}
@keyframes sway-1 {
0% {
transform: rotate(10deg)
}
40% {
transform: rotate(43deg)
}
100% {
transform: rotate(15deg)
}
}
@-webkit-keyframes sway-2 {
0% {
-webkit-transform: rotate(15deg)
}
40% {
-webkit-transform: rotate(56deg)
}
100% {
-webkit-transform: rotate(22deg)
}
}
@-o-keyframes sway-2 {
0% {
-o-transform: rotate(15deg)
}
40% {
-o-transform: rotate(56deg)
}
100% {
-o-transform: rotate(22deg)
}
}
@-ms-keyframes sway-2 {
0% {
-ms-transform: rotate(15deg)
}
40% {
-ms-transform: rotate(56deg)
}
100% {
-ms-transform: rotate(22deg)
}
}
@-moz-keyframes sway-2 {
0% {
-moz-transform: rotate(15deg)
}
40% {
-moz-transform: rotate(56deg)
}
100% {
-moz-transform: rotate(22deg)
}
}
@keyframes sway-2 {
0% {
transform: rotate(15deg)
}
40% {
transform: rotate(56deg)
}
100% {
transform: rotate(22deg)
}
}
@-webkit-keyframes sway-3 {
0% {
-webkit-transform: rotate(25deg)
}
40% {
-webkit-transform: rotate(74deg)
}
100% {
-webkit-transform: rotate(37deg)
}
}
@-o-keyframes sway-3 {
0% {
-o-transform: rotate(25deg)
}
40% {
-o-transform: rotate(74deg)
}
100% {
-o-transform: rotate(37deg)
}
}
@-ms-keyframes sway-3 {
0% {
-ms-transform: rotate(25deg)
}
40% {
-ms-transform: rotate(74deg)
}
100% {
-ms-transform: rotate(37deg)
}
}
@-moz-keyframes sway-3 {
0% {
-moz-transform: rotate(25deg)
}
40% {
-moz-transform: rotate(74deg)
}
100% {
-moz-transform: rotate(37deg)
}
}
@keyframes sway-3 {
0% {
transform: rotate(25deg)
}
40% {
transform: rotate(74deg)
}
100% {
transform: rotate(37deg)
}
}
@-webkit-keyframes sway-4 {
0% {
-webkit-transform: rotate(40deg)
}
40% {
-webkit-transform: rotate(68deg)
}
100% {
-webkit-transform: rotate(25deg)
}
}
@-o-keyframes sway-4 {
0% {
-o-transform: rotate(40deg)
}
40% {
-o-transform: rotate(68deg)
}
100% {
-o-transform: rotate(25deg)
}
}
@-ms-keyframes sway-4 {
0% {
-ms-transform: rotate(40deg)
}
40% {
-ms-transform: rotate(68deg)
}
100% {
-ms-transform: rotate(25deg)
}
}
@-moz-keyframes sway-4 {
0% {
-moz-transform: rotate(40deg)
}
40% {
-moz-transform: rotate(68deg)
}
100% {
-moz-transform: rotate(25deg)
}
}
@keyframes sway-4 {
0% {
transform: rotate(40deg)
}
40% {
transform: rotate(68deg)
}
100% {
transform: rotate(25deg)
}
}
@-webkit-keyframes sway-5 {
0% {
-webkit-transform: rotate(50deg)
}
40% {
-webkit-transform: rotate(78deg)
}
100% {
-webkit-transform: rotate(40deg)
}
}
@-o-keyframes sway-5 {
0% {
-o-transform: rotate(50deg)
}
40% {
-o-transform: rotate(78deg)
}
100% {
-o-transform: rotate(40deg)
}
}
@-ms-keyframes sway-5 {
0% {
-ms-transform: rotate(50deg)
}
40% {
-ms-transform: rotate(78deg)
}
100% {
-ms-transform: rotate(40deg)
}
}
@-moz-keyframes sway-5 {
0% {
-moz-transform: rotate(50deg)
}
40% {
-moz-transform: rotate(78deg)
}
100% {
-moz-transform: rotate(40deg)
}
}
@keyframes sway-5 {
0% {
transform: rotate(50deg)
}
40% {
transform: rotate(78deg)
}
100% {
transform: rotate(40deg)
}
}
@-webkit-keyframes sway-6 {
0% {
-webkit-transform: rotate(65deg)
}
40% {
-webkit-transform: rotate(92deg)
}
100% {
-webkit-transform: rotate(58deg)
}
}
@-o-keyframes sway-6 {
0% {
-o-transform: rotate(65deg)
}
40% {
-o-transform: rotate(92deg)
}
100% {
-o-transform: rotate(58deg)
}
}
@-ms-keyframes sway-6 {
0% {
-ms-transform: rotate(65deg)
}
40% {
-ms-transform: rotate(92deg)
}
100% {
-ms-transform: rotate(58deg)
}
}
@-moz-keyframes sway-6 {
0% {
-moz-transform: rotate(65deg)
}
40% {
-moz-transform: rotate(92deg)
}
100% {
-moz-transform: rotate(58deg)
}
}
@keyframes sway-6 {
0% {
transform: rotate(65deg)
}
40% {
transform: rotate(92deg)
}
100% {
transform: rotate(58deg)
}
}
@-webkit-keyframes sway-7 {
0% {
-webkit-transform: rotate(72deg)
}
40% {
-webkit-transform: rotate(118deg)
}
100% {
-webkit-transform: rotate(68deg)
}
}
@-o-keyframes sway-7 {
0% {
-o-transform: rotate(72deg)
}
40% {
-o-transform: rotate(118deg)
}
100% {
-o-transform: rotate(68deg)
}
}
@-ms-keyframes sway-7 {
0% {
-ms-transform: rotate(72deg)
}
40% {
-ms-transform: rotate(118deg)
}
100% {
-ms-transform: rotate(68deg)
}
}
@-moz-keyframes sway-7 {
0% {
-moz-transform: rotate(72deg)
}
40% {
-moz-transform: rotate(118deg)
}
100% {
-moz-transform: rotate(68deg)
}
}
@keyframes sway-7 {
0% {
transform: rotate(72deg)
}
40% {
transform: rotate(118deg)
}
100% {
transform: rotate(68deg)
}
}
@-webkit-keyframes sway-8 {
0% {
-webkit-transform: rotate(94deg)
}
40% {
-webkit-transform: rotate(136deg)
}
100% {
-webkit-transform: rotate(82deg)
}
}
@-o-keyframes sway-8 {
0% {
-o-transform: rotate(94deg)
}
40% {
-o-transform: rotate(136deg)
}
100% {
-o-transform: rotate(82deg)
}
}
@-ms-keyframes sway-8 {
0% {
-ms-transform: rotate(94deg)
}
40% {
-ms-transform: rotate(136deg)
}
100% {
-ms-transform: rotate(82deg)
}
}
@-moz-keyframes sway-8 {
0% {
-moz-transform: rotate(94deg)
}
40% {
-moz-transform: rotate(136deg)
}
100% {
-moz-transform: rotate(82deg)
}
}
@keyframes sway-8 {
0% {
transform: rotate(94deg)
}
40% {
transform: rotate(136deg)
}
100% {
transform: rotate(82deg)
}
}
.sakura {
/* background: -webkit-linear-gradient(120deg, rgba(255, 183, 197, 1), rgba(255, 197, 208, 1));
background: -o-linear-gradient(120deg, rgba(255, 183, 197, 1), rgba(255, 197, 208, 1));
background: -ms-linear-gradient(120deg, rgba(255, 183, 197, 1), rgba(255, 197, 208, 1));
background: -moz-linear-gradient(120deg, rgba(255, 183, 197, 1), rgba(255, 197, 208, 1));
background: linear-gradient(120deg, rgba(255, 183, 197, 1), rgba(255, 197, 208, 1)); */
/* -webkit-border-radius: 12px 1px;
-o-border-radius: 12px 1px;
-ms-border-radius: 12px 1px;
-moz-border-radius: 12px 1px;
border-radius: 12px 1px; */
background: url(https://www.fshare.vn/event-assets/tet-2018/images/sakura-2.svg);
background-size: cover;
/* color: yellow; */
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
position: absolute
}
</style>
<script type='text/javascript'>
//<![CDATA[
!function(n){!function(){for(var n=0,i=["ms","moz","webkit","o"],a=0;a<i.length&&!window.requestAnimationFrame;++a)window.requestAnimationFrame=window[i[a]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[a]+"CancelAnimationFrame"]||window[i[a]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var a=(new Date).getTime(),t=Math.max(0,16-(a-n)),o=window.setTimeout(function(){i(a+t)},t);return n=a+t,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})}(),n.fn.sakura=function(i){function a(n,i){return Math.floor(Math.random()*(i-n+1))+n}function t(n,i,a){for(var t=0;e>t;t++)o[t]||(i=i.toLowerCase()),n.get(0).addEventListener(o[t]+i,a,!1)}var o=["moz","ms","o","webkit",""],e=o.length,m={blowAnimations:["blow-soft-left","blow-medium-left","blow-hard-left","blow-soft-right","blow-medium-right","blow-hard-right"],className:"sakura",fallSpeed:1,maxSize:14,minSize:9,newOn:300,swayAnimations:["sway-0","sway-1","sway-2","sway-3","sway-4","sway-5","sway-6","sway-7","sway-8"]},i=n.extend({},m,i),r=n(document).height(),s=n(document).width(),w=n('<div class="'+i.className+'" />');n("body").css({"overflow-x":"hidden"});var d=function(){setTimeout(function(){requestAnimationFrame(d)},i.newOn);var o=i.blowAnimations[Math.floor(Math.random()*i.blowAnimations.length)],e=i.swayAnimations[Math.floor(Math.random()*i.swayAnimations.length)],m=(Math.round(.007*r)+5*Math.random())*i.fallSpeed,l="fall "+m+"s linear 0s 1, "+o+" "+((m>30?m:30)-20+a(0,20))+"s linear 0s infinite, "+e+" "+a(2,4)+"s linear 0s infinite",u=w.clone(),c=a(i.minSize,i.maxSize),h=Math.random()*s-100,f=-(20*Math.random()+15);t(u,"AnimationEnd",function(){n(this).remove()}),t(u,"AnimationIteration",function(a){-1!=n.inArray(a.animationName,i.blowAnimations)&&n(this).remove()}),u.css({"-webkit-animation":l,"-o-animation":l,"-ms-animation":l,"-moz-animation":l,animation:l,height:c,left:h,"margin-top":f,width:c}).appendTo("body")};n(window).resize(function(){r=n(document).height(),s=n(document).width()}),requestAnimationFrame(d)}}(jQuery);
//]]></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function () {
var options = {
blowAnimations: ['blow-soft-left', 'blow-medium-left', 'blow-hard-left', 'blow-soft-right', 'blow-medium-right', 'blow-hard-right'],
className: 'sakura',
fallSpeed: 1,
maxSize: 30,
minSize: 20,
newOn: 300,
swayAnimations: ['sway-0', 'sway-1', 'sway-2', 'sway-3', 'sway-4', 'sway-5', 'sway-6', 'sway-7', 'sway-8']
};
try {
$('body').sakura(options);
}
catch(err) {
}
});
//]]></script>