jQuery实现让博客桃花飘落

佛系豪豪吖

发布于 2023-02-23 08:54:08

25000

代码可运行

文章被收录于专栏：智慧分享屋智慧分享屋

运行总次数：0

代码可运行

桃花飘落DEMO

<script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>

爱心飘落DEMO

style样式

<style>
html,body{height: 100%;width: 100%;}
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font-size:12px;font-family:'微软雅黑';background:#fff;height: 100%;width: 100%;background-color: #fff;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}
#content { 
	width: 100%;
	height: 100%; 
	top: 0px;
	overflow: hidden; 
	position: absolute; 
}
#snowflake { 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	top: 0; 
	left: 0; 
	overflow: hidden; 
}
.snowRoll { 
	position: absolute; 
	opacity: 0; 
	-webkit-animation-name: mysnow; 
	-webkit-animation-duration: 20s; 
	-moz-animation-name: mysnow; 
	-moz-animation-duration: 20s; 
	height: 80px; 
}
@-webkit-keyframes mysnow {  
	0% {
	 bottom: 100%;
	}
	 50% {
	 -webkit-transform: rotate(1080deg);
	}
	 100% {
	 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
	}
}
@-moz-keyframes mysnow {  
	0% {
	 bottom: 100%;
	}
	 50% {
	 -moz-transform: rotate(1080deg);
	}
	 100% {
	 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
	}
}
</style>

引入JS

https://foxihaohao.com/Aziyuan/taohua/js/jquery.transit.js

https://foxihaohao.com/Aziyuan/taohua/js/jquery.xuehua.js

引入images

https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_1.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_2.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_3.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_4.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_5.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_6.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_7.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_8.png
https://foxihaohao.com/Aziyuan/taohua/images/icon_petal_9.png