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>
<!--- #Event TET -->
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/AVvXsEilXveb9TJMGbxsl7s-U2MFB0lM-L_h10AZMGCYKz1praHCKK9z3xJ9gUpwp7uNaw38ZYarBch5kXu_qkEEN6ntWzqtnrndeuqSWItY2OfFq1E4-QhYcQfxUksCWNzE86sHrrpZ7IJj3tM/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/AVvXsEhwbIMRfIV-dsbG-_ISNjr0lEdnMdk6L59rKohy6PlYj0vZMJXWAZSvULiNGzJRif88KEvtQRUXUfCS3SRRpj0TseYIq3HAKJZm8GcF0H_HlhJib35M47C9tdMfjIgCBVfWVhwxaY1VRzY/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/AVvXsEgZW3rKS_lMr29q93VeZiRRNWvohLO7SnW79wkaj4MuNPyboAe_amQXMY3OwDwR0Rz_R2Pk5JQpg9LQKJ1HXbxh7EExv8jkjn-buYFx5u2q1FBzmv29ONdHmCubyyEMrUlMbHOjrtWBRiQ/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>
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam
Nhận xét
Đăng nhận xét