body {
color: #000;
background: url(https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302) fixed;
background-size: 1300px;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
/* 推荐及反对 */
#div_digg {
    padding: 5px;
    position: fixed;
    z-index: 1000;
    bottom: 0px;
    right: 0;
    border: 0px solid #D9DBE1;
    background-color: #FFFFFF;
    opacity: 0.8;
    width: 46px;
    float: right;
    margin-bottom: 10px;
    margin-right: 10px;
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
    border: 2px solid red;
}
/* ignore反对 */
.buryit {
    display: none;
}
/* 设置签名格式 */
#MySignature {
    display: none;
    background-color: #B2E866;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #6B6B6B;
    padding: 10px;
    line-height: 1.5;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family: 'Microsoft Yahei';
}
/* 设置博客正文一二三级标题格式 */
/* 一级标题 */
#cnblogs_post_body h1 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: black;
    margin: 10px 0;
}
/* 二级标题 */
#cnblogs_post_body h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: royalblue;
    margin: 10px 0;
}
/* 三级标题 */
#cnblogs_post_body h3 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: dimgrey;
}
/*  正文 */
#cnblogs_post_body p {
    font-size: 12pt;
}
/* 设置tongqingliu顶部间距*/
h1 {
    margin-top: 20px;
}

/* 设置tongqingliu方框及背景*/
#top {
    color: #333;
    margin-left: 50px;
    margin-right: 50px;
    border-radius: 10px;
    background-color: royalblue;
    border-top:0px;
    padding-bottom: 35px;
    text-align: center;
}

/* 设置tongqingliu字体及大小*/
#top a, #top a:link, #top a:visited, #top a:active, #top a:hover {
    font-family: "Comic Sans MS";
    font-size: larger;
    color: whitesmoke;
}

/* 设置保持学习的态度 */
#tagline {
    margin-top: 20px;
    font-size: large;
    color:white;
}

/* 导航及以文字所在方框的位置 */
#leftmenu {
    margin-top: 100px;
}

/* 导航，统计信息 */
#leftmenu h3 {
    font-family: palatino,georgia,times new roman,serif;
    color: whitesmoke;
    background-color: royalblue;
    font-size: 1.5em;
    font-weight: normal;
    padding: 3px;
    margin-top: 0;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* 首页，联系，管理，随笔，文章，评论 */
#leftmenu ul {
    font-size: 14px;
}

/* 置顶随笔及以下所在方框 */
#main {
    margin-top: 50px;
}

/* 置顶随笔， 日期  */
p.date {
    color: black;
    font-family: Palatino,georgia,times new roman,serif;
    font-size: 1em;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 10px;
    display: none;
}


#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a {
    display: none;
}


#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 0.7);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url('https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302') fixed no-repeat;   //修改背景图片
    background-position: 50% 5%;
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(240,255,255,0.5);   //博客标题的背景
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #FF1493;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
    line-height: 1.8;
    color: #FF1493;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
    background-color:rgba(135,206,205, 0.5);          //标题栏下的颜色
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(132,112,255, 0);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color:     #FF6A6A;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #EE6363;
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}
.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #757575;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 35px;
    word-wrap: break-word;
}
.CalTitle{
    background: rgba(255, 255, 255, 0);
}
.catListTitle{
    background-color: rgba(255,110,180,0.6);   //栏目的条纹颜色
}
#topics{
    background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
    display: none;
}
#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{
    background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
    background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0);
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5);
}


<html>

<head>
<title>网页特效|Linkweb.cn/Js|---页面上桃花飘飘</title>
</head>

<body topMargin="0" bgproperties="fixed">

<table border="0" cellPadding="0" cellSpacing="0" width="100%" height="100">
<TBODY>
  <tr>
    <td height="100" vAlign="top" width="100%"><dl>
      <dd align="center">
      <img alt="欢迎" src="images/taoshu.gif" width="400" height="100"></dd>
    </dl>
    </td>
  </tr>
</TBODY>
</table>

<table width="100%">
  <tr>
  </tr>
</table>

<p><br>
<script language="javascript">
  var plumsrc="images/flower.gif"
  // Configure below to change number of plum to render
  var no = 15;

  var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
  var ie4up = (document.all) ? 1 : 0;

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;
  
  if (ns4up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
    if (ns4up) {                      // set layers
      if (i == 0) {
        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"https://dynamicdrive.com/\"><img src='"+plumsrc+"' border=\"0\"></a></layer>");
      } else {
        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+plumsrc+"' border=\"0\"></layer>");
      }
    } else if (ie4up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"https://best.163.com/~gujun\"><img src='"+plumsrc+"' border=\"0\"></a></div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+plumsrc+"' border=\"0\"></div>");
      }
    }
  }
  
  function plumNS() {  // Netscape main animation function
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      }
      dx[i] += stx[i];
      document.layers["dot"+i].top = yp[i];
      document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
    }
    setTimeout("plumNS()", 10);
  }

  function plumIE() {  // IE main animation function
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
        doc_width = document.body.clientWidth;
        doc_height = document.body.clientHeight;
      }
      dx[i] += stx[i];
      document.all["dot"+i].style.pixelTop = yp[i];
      document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
    }
    setTimeout("plumIE()", 10);
  }

  if (ns4up) {
    plumNS();
  } else if (ie4up) {
    plumIE();
  }

</script>
<script language="javascript">
st=n=m=0;k=9;ns=navigator.appName=="Netscape";
t1=new Image();
t1.src="images/flower1.gif" 
t2=new Image();
t2.src="images/flower2.gif"  
function ner(){return true}
window.onerror=ner
function pop(name){
  i=document.cookie.indexOf(name+"=");
  if(i!=-1){
    i=document.cookie.indexOf("=",i)+1;
    j=document.cookie.indexOf("#",i);
    if(j!=-1)return document.cookie.substring(i,j)}}
function ps(name,value){document.cookie=name+"="+value+"#"}
if(!(ym=parseInt(pop("tsym"))))ym=0;if(!(y=parseInt(pop("tsy"))))y=0;if(!(xm=parseInt(pop("tsxm"))))xm=100;if(!(x=parseInt(pop("tsx"))))x=0;if(!(m=parseInt(pop("tsm"))))m=0;
function DM(){if(m)ps("tsm",--m);else ps("tsm",++m)}
function M(e){
  if(n){
    if(ns){
      ts.left=x=e.pageX-xm;ts.top=y=e.pageY-ym
    }else{
      ts.left=x=document.body.scrollLeft+event.clientX-xm;ts.top=y=document.body.scrollTop+event.clientY-ym;event.returnValue=false}
  }else{
    if(ns){
      xm=e.pageX;ym=e.pageY
    }else{
      xm=document.body.scrollLeft+event.clientX;ym=document.body.scrollTop+event.clientY}}}
function dd(){
  if(ns){ps("tsx",x);ps("tsy",y)}
  if(n){
    if(ns){ps("tsxm",xm+x);ps("tsym",ym+y)}
  }else{
    if(ns){ps("tsxm",xm);ps("tsym",ym)}
    st=xm-x;
    if(st>60&&k<0){k=-k;document.t.src=t2.src}
    if(st<40&&k>0){k=-k;document.t.src=t1.src}
    if(!m){
      if((st>120&&k>0)||(st<-20&&k<0)){ts.left=x+=k}
      st=ym-y;
      if(st>85)ts.top=y+=9;
      if(st<-5)ts.top=y-=9}}}
function MD(e){
  if(ns){
	xm=e.pageX;ym=e.pageY
  }else{
    xm=document.body.scrollLeft+event.clientX;ym=document.body.scrollTop+event.clientY}
  if(xm<x+80&&xm>x+10&&ym<y+70&&ym>y+10){
    if(!ns){
      if(event.button<2){xm=xm-x;ym=ym-y;n=1}
    }else{
      xm=xm-x;ym=ym-y;n=1;return false
    }
  }
}
function MU(){if(n){n=0;xm+=x;ym+=y}}
function cls(){ps("tsym",ym);ps("tsy",y);ps("tsxm",xm);ps("tsx",x)}
if(!ns)window.onunload=cls;
if(ns)document.captureEvents(Event.DBLCLICK|Event.MOUSEDOWN|Event.MOUSEUP|Event.MOUSEMOVE);
document.onmousemove=M;document.onmouseup=MU;document.onmousedown=MD;document.ondblclick=DM;
document.write("<div id=ts style=position:absolute;width:28;height:26;z-index:10><img name=t src="+t2.src+"></div>");
var ts=(ns)?document.ts:document.all.ts.style;ts.left=x;ts.top=y;dd();setInterval("dd()",10)

</script>
</p>
</body>
</html>
#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);
}
}


  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script src="xxx/js/jquery.transit.js"></script>		
		<script type="text/javascript">
			$(function() {

				var snowflakeURl = [
					'img/timg.jpg',
					'img/timg.jpg',
					'img/timg.jpg',
					'img/timg.jpg',
					'img/timg.jpg',
					'img/timg.jpg',
				] //js设置数组存储6张花瓣的图片

				var container = $("#content");
				visualWidth = container.width();
				visualHeight = container.height();
				//获取content的宽高
				///////
				//飘雪花 //
				///////
				function snowflake() {
					// 雪花容器
					var $flakeContainer = $('#snowflake');

					// 随机六张图
					function getImagesName() {
						return snowflakeURl[[Math.floor(Math.random() * 7)]];
					}
					// 创建一个雪花元素
					function createSnowBox() {
						var url = getImagesName();
						return $('<div class="snowbox" />').css({
							'width': 41,
							'height': 41,
							'position': 'absolute',
							'backgroundSize': 'cover',
							'zIndex': 100000,
							'top': '-41px',
							'backgroundImage': 'url(' + url + ')'
						}).addClass('snowRoll');
					}
					// 开始飘花
					setInterval(function() {
						// 运动的轨迹
						var startPositionLeft = Math.random() * visualWidth - 100,
							startOpacity = 1,
							endPositionTop = visualHeight - 40,
							endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
							duration = visualHeight * 10 + Math.random() * 5000;

						// 随机透明度，不小于0.5
						var randomStart = Math.random();
						randomStart = randomStart < 0.5 ? startOpacity : randomStart;
						// 创建一个雪花
						var $flake = createSnowBox();
						// 设计起点位置
						$flake.css({
							left: startPositionLeft,
							opacity: randomStart
						});
						// 加入到容器
						$flakeContainer.append($flake);
						// 开始执行动画
						/* $flake.transition({
							top: endPositionTop,
							left: endPositionLeft,
							opacity: 0.7
						}, duration, 'ease-out', function() {
							$(this).remove() //结束后删除
						}); */
						
						//jquery 不引入其他js写法
						$flake.animate({
							top: endPositionTop,
							left: endPositionLeft,
							opacity: 0.7
						}, duration, 'linear', function() {
							$(this).remove() //结束后删除
						});

					}, 200);
				}
				snowflake()
				//执行函数

			})
		</script>