個人隨筆---博客園自定義樣式

個人隨筆---博客園自定義樣式

這是個人博客園的樣式代碼。比較簡潔。。。

其中js樣式須要去申請權限。（只要語氣謙和，基本都能經過。個人是上午申請，下午就開通了）

下面的代碼案例只需複製到其中對應的選框中就能夠了。原有的css樣例模板就能應用，不須要禁用css。若是有細小的差異，下面每個樣例都有註釋。你們能夠更改調式。

每個小插件均可以單獨使用的哦，若是不喜歡。能夠刪除增長。

你們能夠點擊個人首頁，對比個人博客園加以更改。

這裏是所有樣式：(๑•̀ㅂ•́)و✧

頁面制定CSS代碼

 1 /*側邊欄公告*/
 2 #blog-news > img {
 3     /*頭像*/
 4  display: block;
 5  margin: auto;
 6  border-radius: 50%;
 7 }
 8 
 9 #profile_block {
 10  font-size: 15px;
 11  padding: 20px;
 12  line-height: 1.8;
 13 }
 14 
 15 #profile_block > a:link {
 16  color: #F60;
 17 }
 18 /*公告結束*/
 19 
 20 
 21 /* 個性簽名 */
 22 #MySignature {
 23  box-shadow: 8px 1px 10px #989898;
 24  padding: 10px;
 25  text-shadow: 1px 1px 1px #FFF;
 26  font-size: 15px;
 27  border-left: solid 5px #55895B;
 28  background: #FBF9F9;
 29  border-radius: 10px 10px 37% 10px;
 30  line-height: 2.4;
 31  margin: 37px 0;
 32 }
 33 
 34 #MySignature a {
 35  text-decoration: none;
 36  color: #4183c4;
 37  font-weight: bold;
 38 }
 39 
 40 #MySignature a:hover {
 41  text-decoration: underline;
 42  color: #f60;
 43 }
 44 
 45 #MySignature span {
 46  color: #f60;
 47 }
 48 
 49 /*標題h2的自定義格式*/
 50 #cnblogs_post_body h2 {
 51  border: 1px solid #55895B;
 52  border-left-width: 5px;
 53  border-radius: 10px;
 54  border-right-width: 5px;
 55  background-color: #FBF9F9;
 56  background-position: left center;
 57  padding: 3px 5px;
 58  width: 100%;
 59  display: inline-block;
 60  box-sizing: border-box;
 61 }
 62 
 63 
 64 /* 關注收藏等幾個按鈕 */
 65 #green_channel {
 66  padding: 10px;
 67  margin: 20px 0;
 68  font-size: 15px;
 69  width: 400px;
 70 }
 71 
 72 #green_channel a {
 73  border-radius: 3px;
 74  text-shadow: none;
 75  font-weight: normal;
 76  box-shadow: none;
 77 }
 78 
 79 /* 禁用下劃線 */
 80 .postBody a:link, .postBody a:visited, .postBody a:active {
 81  text-decoration: none;
 82 }
 83 
 84 /* 上一篇下一篇 */
 85 #post_next_prev {
 86  font-size: 14px;
 87  color: #535353;
 88 }
 89 
 90 /*好看的滾動條*/
 91 ::-webkit-scrollbar{
 92  width:10px!important;
 93  height:10px!important;
 94  -webkit-appearance:none;
 95 }
 96 ::-webkit-scrollbar-thumb{
 97  height:5px;border:1px solid transparent;
 98  border-top:none;border-bottom:none;
 99  -webkit-border-radius:6px;
100  background-color:rgba(0,0,0,.3);
101  background-clip:padding-box;
102 }
103 
104 
105 /* 刪除反對按鈕,有點邪惡了 */
106 .buryit{
107  display: none;
108 }
109 
110 /*目錄樣式*/
111 #sideCatalog a{
112  font-size:12px;
113  font-weight:normal !important;
114 }
115 
116 /* 文章title自定義帶動畫樣式 */
117 .postTitle {
118  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
119  clear: both;
120  background-color: #FBF9F9;
121  margin-bottom: 8px;
122  padding-top: 5px;
123  padding-bottom: 5px;
124  margin-top: 17px;
125  border-left: 3px solid #21759b;
126  padding-left: 17px;
127  font-size: 17px;
128  border-radius:0px;
129 }
130 .postTitle a:hover {
131  text-decoration: none;
132  margin-left: 17px;
133  color: #E00000;
134 }
135 .postTitle a:link, 136 .postTitle a:visited, 137 .postTitle a:active {
138  transition: all 0.4s linear 0s;
139 }
140 
141 /*博客導航欄 */
142 #navList {
143  float:right;
144 }
145 
146 #navList li {
147  border: none;
148  font-size: 16px;
149 }
150 
151 .blogStats {
152  display: none;
153 }
154 
155 
156 /*屏蔽廣告 adblock */
157 #ad_t2 {
158  display: none;
159 }
160 .c_ad_block {
161  display: none;
162 }
163 
164 /*新加 頭像 img 側邊*/
165 
166 #newsSideBar .headImage {
167  padding: auto;
168 }
169 #newsSideBar .headImage img {
170  border: 3px solid #C0C0C0;
171  border-radius: 50%;
172  width: 150px;
173  margin: auto;
174  display: block;
175 }
176 
177 /*評論*/
178 /*評論列表*/
179 #blog-comments-placeholder {
180  border-radius: 10px;
181  background: #fff;
182  padding: 30px 40px;
183 }
184 
185 .feedback_area_title {
186  background: url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
187  border: 1px solid #55895B;
188  border-left-width: 5px;
189  border-radius: 10px;
190  border-right-width: 5px;
191  padding: 15px 50px;
192 }

 1 /*雪花背景*/
 2 #Snow{
 3  position: fixed;
 4  top: 0;
 5  left: 0;
 6  width: 100%;
 7  height: 100%;
 8  z-index: 99999;
 9  background: rgba(255,255,240,0.1);
10  pointer-events: none;
11 }

博客側邊公告欄 

 1 <script type="text/javascript">  2 
 3 /*設置目錄（側邊HTML代碼）*/
 4  //如下是錨點JS  5  var a = $(document);  6  a.ready(function() {
 7  var b = $('body'),  8  d = 'sideToolbar',  9  e = 'sideCatalog',  10  f = 'sideCatalog-catalog',  11  g = 'sideCatalogBtn',  12  h = 'sideToolbar-up',  13  i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>',  14  j = '',  15  k = 200,  16  l = 0,  17  m = 0,  18  n = 0,  19  //限制存在個數，如數量過多，則只顯示h2，不顯示h3  20  //o, p = 13,  21  o, p = 100,  22  q = true,  23  r = true,  24  s = b;  25  if(s.length === 0) {  26  return  27         };  28  b.append(i);  29  //指定獲取目錄的範圍-------------這一點很是重要，由於每一個人指定的範圍都不同，因此這是要修改的地方  30  //o = s.find(':header');  31  o = $('#cnblogs_post_body').find(':header')  32  if(o.length > p) {
 33  r = false;  34  var t = s.find('h2');  35  var u = s.find('h3');  36  if(t.length + u.length > p) {  37  q = false  38           }
 39  };  40  o.each(function(t) {
 41  var u = $(this),  42  v = u[0];  43 
 44  var title = u.text();  45  var text = u.text();  46 
 47  u.attr('id', 'autoid-' + l + '-' + m + '-' + n)  48  //if (!u.attr('id')) {  49  // u.attr('id', 'autoid-' + l + '-' + m + '-' + n)  50  //};  51  if(v.localName === 'h2') {
 52  l++;  53  m = 0;  54  if(text.length > 14) text = text.substr(0, 20) + "...";  55  j += '<li><span>' + l + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';  56           } else if(v.localName === 'h3') {
 57  m++;  58  n = 0;  59  if(q) {  60  if(text.length > 12) text = text.substr(0, 16) + "...";  61  j += '<li class="h2Offset"><span>' + l + '.' + m + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';  62             }
 63  } else if(v.localName === 'h4') {
 64  n++;  65  if(r) {  66  j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';  67             }
 68  }  69  });  70  $('#' + f + '>ul').html(j);  71  b.data('spy', 'scroll');  72  b.data('target', '.sideCatalogBg');  73  $('body').scrollspy({
 74  target: '.sideCatalogBg'  75         });  76  $sideCatelog = $('#' + e);  77  $('#' + g).on('click', function() {
 78  if($(this).hasClass('sideCatalogBtnDisable')) {  79  $sideCatelog.css('visibility', 'hidden')  80           } else {
 81  $sideCatelog.css('visibility', 'visible')  82           };  83  $(this).toggleClass('sideCatalogBtnDisable')  84  });  85  $('#' + h).on('click', function() {
 86  $("html,body").animate({  87  scrollTop: 0  88           }, 500)  89  });  90  $sideToolbar = $('#' + d);  91 
 92  //經過判斷評論框是否存在顯示索引目錄  93  var commentDiv = $("#blog-comments-placeholder");  94 
 95  a.on('scroll', function() {
 96  //評論框存在才調用方法  97  if(commentDiv.length > 0) {  98  var t = a.scrollTop();  99  if(t > k) { 100  $sideToolbar.css('display', 'block'); 101  $('#gotop').show() 102             } else {
103  $sideToolbar.css('display', 'none') 104  $('#gotop').hide() 105             }
106  } 107  }) 108  }); 109  //以上是錨點JS 110  //如下是返回頂部JS 111  $(function() {
112  $('body').append('<div id="gotop" onclick="goTop();"></div>'); 113       }); 114 
115  function goTop(u, t, r) {
116  var scrollActivate = !0; 117  if(scrollActivate) { 118  u = u || 0.1; 119  t = t || 16; 120  var s = 0, 121  q = 0, 122  o = 0, 123  p = 0, 124  n = 0, 125  j = 0; 126  document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0); 127  document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0); 128  n = window.scrollX || 0; 129  j = window.scrollY || 0; 130  s = Math.max(s, Math.max(o, n)); 131  q = Math.max(q, Math.max(p, j)); 132  p = 1 + u; 133  window.scrollTo(Math.floor(s / p), Math.floor(q / p)); 134  0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r() 135         } else {
136  scrollActivate = !0 137         }
138  } 139  //以上是返回頂部JS 140  </script> 141 
142 
143 <div id="newsSideBar"> 144  <div class="headImage"> 145  <img src="https://pic.cnblogs.com/avatar/1444343/20190803112901.png" alt="頭像"> 146  </div> 147 </div>

/*動態線條
color: 線條顏色，默認：‘0，0，0’；三個數字分別爲(R,G,B),注意使用，分割 opacity: 線條透明度0~1,默認0.5 count: 線條總數量，默認150 zIndex: 背景的z-Index屬性，css用於控制所在層的位置，默認-1
*/ <div style = "display:none;">動態線條</div> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }(); </script> <div style = "display:none;"> 動態線條end</div>

/*雪花背景-須要修改第二處-上一處在CSS樣式中*/ <div class="Snow"> <canvas id="Snow"></canvas> </div> <script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>

 1 @font-face {
 2  font-family: 'FontAwesome';
 3  font-style: normal;
 4  font-weight: normal;
 5  src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
 6 }
 7 * {
 8  margin: 0;
 9  padding: 0;
 10 }
 11 body {
 12  background: #eee;
 13  color: #444;
 14  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
 15  font-size: 14px;
 16  text-shadow: 0 0 1px transparent;
 17  color:#505050;
 18 }
 19 @media screen and (max-width: 1260px) {
 20  body {  21  margin: 0px;
 22   }
 23 }  24 @media screen and (max-width: 600px) {
 25  body {  26  font-size: 13px;
 27   }
 28 }  29 h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
 30 h1 {font-size: 1.8em;}
 31 h2 {font-size: 1.5em;}
 32 h3 {font-size: 1.3em;}
 33 a {text-decoration: none;color: #258fb8;}
 34 a:hover {text-decoration: underline;}
 35 #home{
 36  margin: 0 auto;
 37  width: 85%;
 38  background-color: #fff;
 39  padding: 30px;
 40  margin-top: 50px;
 41  margin-bottom: 50px;
 42  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 43  border-radius: 20px;
 44 }
 45 #tbCommentBody {width: 100%;}
 46 #blogTitle {width:22%;margin-top: -10px;text-align: center;}
 47 .alignright {float: right;}
 48 .clearfix {zoom: 1;}
 49 .clearfix:before,.clearfix:after {content: "";display: table;}
 50 .clearfix:after {clear: both;}
 51 #header, #main, #footer {width: 100%;margin: 0 auto;}
 52 @media screen and (max-width: 1260px) {
 53  #main {  54  width: 95%;
 55   }
 56 }  57 #mainContent {
 58  width: 75%;
 59  float: left;
 60  margin-left: 10px;
 61 }
 62 @media screen and (max-width: 1260px) {
 63  #main-col {  64  width: 100%;
 65  margin-right: -300px;
 66   }
 67 }  68 @media screen and (max-width: 900px) {
 69  #main-col {  70  margin-right: 0;
 71  float: none;
 72   }
 73 }  74 @media screen and (max-width: 1260px) {
 75  #wrapper {  76  margin-right: 300px;
 77   }
 78 }  79 @media screen and (max-width: 900px) {
 80  #wrapper {  81  margin-right: 0;
 82   }
 83 }  84 #header {
 85  text-shadow: 0 0 1px #fff;
 86  margin: 20px auto 30px;
 87  position: relative;
 88  height: 60px;
 89  color: #999;
 90 }
 91 #header a {
 92  color: #999;
 93 }
 94 #header a:hover {
 95  color: #258fb8;
 96  text-decoration: none;
 97 }
 98 #header h1 {
 99  font-weight: normal;
100  font-size: 30px;
101 }
102 #header h2 {
103  font-weight: normal;
104  font-size: 0.9em;
105  margin-top: 10px;
106  margin-left: 30px;
107 }
108 #header #navigator {
109  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
110  width: 100%;
111  font-size: 16px;
112  border-bottom: 1px solid #ededed;
113  border-top: 1px solid #ededed;
114  height: 50px;
115  line-height: 50px;
116  clear: both;
117  margin-top: 25px;
118 }
119 #header #navigator ul {
120  list-style: none;
121 }
122 #header #navigator ul li {
123  float: left;
124  width: 10%;
125  text-align: center;
126  margin-right: 15px;
127 }
128 #header .blogStats {
129  float: right;
130  font-size: 13px;
131 }
132 .topicListFooter {
133  margin-top:30px;
134  margin-bottom: 30px;
135  margin-right: 0 !important;
136 }
137 .topicListFooter a {
138  display: inline !important;
139  padding: 10px 20px;
140  background: #ddd;
141  color: #999;
142  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
143  text-shadow: 0 0 1px #fff;
144  border-radius: 5px;
145 }
146 .topicListFooter a:hover {
147  background: #258fb8;
148  color: #fff;
149  text-decoration: none;
150  text-shadow: none;
151 }
152 .topicListFooter .prev:before {
153  content: '\f053';
154  padding-right: 10px;
155  font-family: FontAwesome;
156 }
157 .topicListFooter .next:after {
158  content: '\f054';
159  padding-left: 10px;
160  font-family: FontAwesome;
161 }
162 article {
163  -webkit-box-shadow: 1px 2px 3px #ddd;
164  box-shadow: 1px 2px 3px #ddd;
165  background: #fff;
166 }
167 article.page {
168  padding-left: 20px;
169 }
170 article.page .icon {
171  display: none;
172 }
173 .postIcon:before {
174  content: '\f016';
175 }
176 article.photo .icon:before {
177  content: '\f030';
178 }
179 article.link .icon:before {
180  content: '\f0c1';
181 }
182 article.link .title a:after {
183  content: '\f08e';
184  color: #999;
185  font: 12px FontAwesome;
186  padding-left: 10px;
187  vertical-align: super;
188 }
189 /******************************************如下自定義樣式***********************************************/
190 #MySignature{
191 border-top: 2px solid #ccc;
192  padding-top: 20px;
193 }
194 .pager{
195  border-bottom: 1px dashed #ddd;
196  padding-bottom: 30px;
197 margin-bottom: -30px;
198 }
199 #blog-calendar{
200  width:0px;
201  height:0px;
202  display: none !important;
203 }
204 #TopViewPostsBlock ul li{
205  white-space: nowrap;
206  overflow: hidden;
207  text-overflow: ellipsis;
208  width: 100%;
209  display: inline-block;
210  height: 30px;
211  line-height: 30px;
212 }
213 .day .dayTitle{
214  display: none !important;
215 }
216 //去掉廣告 217 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{
218  display: none !important;
219 }
220 .postTitle, .entrylistPosttitle {
221  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
222  font-size: 1.8em;
223  padding: 20px 20px 15px 0px;
224  background: #fff;
225  border-radius: 10px 10px 0px 0px;
226  white-space: nowrap;
227  overflow: hidden;
228  text-overflow: ellipsis;
229 }
230 .entrylistPostSummary, .postCon, .postBody {
231  padding: 0 20px 15px 0px;
232  -webkit-box-shadow: 1px 2px 3px #ddd;
233  box-shadow: 0 2px 0 #ddd;
234  background: #fff;
235  position: relative;
236 }
237 .postDesc, .entrylistItemPostDesc {
238  padding: 0px 20px 15px 0px;
239  color: #999;
240  font-size: 0.9em;
241  line-height: 16px;
242  position: relative;
243  min-height: 16px;
244  background: #fff;
245  border-bottom: 1px dashed #ccc;
246 }
247 #blog-calendar {
248  display: none;
249 }
250 @media screen and (max-width: 600px) {
251  .postCon { 252  padding-left: 0px;
253   }
254 } 255 .postIcon {
256  height: 0px;
257  margin-right: 25px;
258  position: relative;
259  top: 25px;
260  left: 25px;
261  color: #258fb8;
262 }
263 @media screen and (max-width: 600px) {
264  article header .icon { 265  display: none;
266   }
267 } 268 .postIcon:before {
269  position: absolute;
270  font: 32px FontAwesome;
271  top: 0;
272  left: 0;
273  width: 32px;
274  text-align: center;
275 }
276 article header time {
277  color: #999;
278  font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
279  margin-bottom: 5px;
280  display: block;
281  line-height: 1;
282 }
283 article header .title {
284  font-weight: normal;
285 }
286 article header .title a {
287  color: #444;
288 }
289 article header .title a:hover {
290  color: #258fb8;
291  text-decoration: none;
292 }
293 #cnblogs_post_body {
294  text-align: justify;
295  line-height: 1.6;
296 }
297 #cnblogs_post_body p, 298 #cnblogs_post_body blockquote, 299 #cnblogs_post_body ul, 300 #cnblogs_post_body ol, 301 #cnblogs_post_body dl, 302 #cnblogs_post_body table, 303 #cnblogs_post_body iframe, 304 #cnblogs_post_body h3, 305 #cnblogs_post_body h4, 306 #cnblogs_post_body h5, 307 #cnblogs_post_body h6, 308 #cnblogs_post_body .video-container {
309  margin-top: 15px;
310 }
311 #cnblogs_post_body blockquote {
312  border-top: 1px solid #ddd;
313  border-bottom: 1px solid #ddd;
314  font-style: italic;
315  font-family: "Georgia", serif;
316  font-size: 1.2em;
317  padding: 0 30px 15px;
318 }
319 #cnblogs_post_body blockquote footer {
320  border-top: none;
321  font-size: 0.8em;
322  line-height: 1;
323  margin: 20px 0 0;
324  padding-top: 0;
325 }
326 #cnblogs_post_body blockquote footer cite:before {
327  content: '—';
328  color: #ccc;
329  padding: 0 0.5em;
330 }
331 #cnblogs_post_body code, 332 #cnblogs_post_body pre {
333  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
334 }
335 #cnblogs_post_body code {
336  background: #eee;
337  color: #666;
338  padding: 0 5px;
339  margin: 0 2px;
340  font-size: 0.9em;
341  border: 1px solid #ddd;
342  -webkit-border-radius: 3px;
343  border-radius: 3px;
344 }
345 #cnblogs_post_body pre {
346  background: #eee;
347  overflow: auto;
348  padding: 7px 15px;
349  -webkit-border-radius: 2px;
350  border-radius: 2px;
351 }
352 #cnblogs_post_body pre code {
353  background: none;
354  padding: 0;
355  margin: 0;
356  border: none;
357  -webkit-border-radius: 0;
358  border-radius: 0;
359 }
360 #cnblogs_post_body ul ul, 361 #cnblogs_post_body ol ul, 362 #cnblogs_post_body dl ul, 363 #cnblogs_post_body ul ol, 364 #cnblogs_post_body ol ol, 365 #cnblogs_post_body dl ol, 366 #cnblogs_post_body ul dl, 367 #cnblogs_post_body ol dl, 368 #cnblogs_post_body dl dl {
369  margin-top: 0;
370 }
371 #cnblogs_post_body h1, 372 #cnblogs_post_body h2 {
373  font-weight: bold;
374  border-bottom: 1px solid #ddd;
375  padding-bottom: 10px;
376  margin-top: 20px;
377 }
378 #cnblogs_post_body h3, 379 #cnblogs_post_body h4, 380 #cnblogs_post_body h5, 381 #cnblogs_post_body h6 {
382  font-weight: normal;
383  background: #eee;
384  border-radius: 6px;
385  color: Red;
386  font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
387  height: 25px;
388  line-height: 25px;
389  margin: 18px 5px !important;
390  padding: 8px;
391  opacity: 0.8;
392  border: 1px dashed #aaa;
393 }
394 .postBody img, 395 .entrylistPostSummary img, .postCon img, 396 .postBody video {
397  max-width: 100%;
398  height: auto;
399  border: none;
400 }
401 #cnblogs_post_body iframe {
402  border: none;
403 }
404 #cnblogs_post_body .caption {
405  display: block;
406  margin-top: 5px;
407  color: #999;
408  position: relative;
409  font-size: 0.9em;
410  padding-left: 25px;
411 }
412 #cnblogs_post_body .caption:before {
413  content: '\f040';
414  position: absolute;
415  font: 1.3em FontAwesome;
416  position: absolute;
417  left: 0;
418  top: 3px;
419 }
420 #cnblogs_post_body .video-container {
421  position: relative;
422  padding-bottom: 56.25%;
423  padding-top: 30px;
424  height: 0;
425  overflow: hidden;
426 }
427 #cnblogs_post_body .video-container iframe, 428 #cnblogs_post_body .video-container object, 429 #cnblogs_post_body .video-container embed {
430  position: absolute;
431  top: 0;
432  left: 0;
433  width: 100%;
434  height: 100%;
435  margin-top: 0;
436 }
437 #cnblogs_post_body .pullquote {
438  float: right;
439  border: none;
440  padding: 0;
441  margin: 1em 0 0.5em 1.5em;
442  text-align: left;
443  width: 45%;
444  font-size: 1.5em;
445 }
446 #blog-comments-placeholder, #comment_form {
447  padding: 20px;
448  background: #fff;
449  -webkit-box-shadow: 1px 10px 10px #ddd;
450  box-shadow: 10px 10px 10px #ddd;
451  margin-bottom: 50px;
452  border: 1px solid #ccc;
453 padding-top:0;
454 }
455 .feedback_area_title {
456  margin-bottom: 15px;
457  font-size: 1.8em;
458 }
459 .feedbackItem {
460  border-bottom: 1px dashed #CCC;
461  margin-bottom: 10px;
462  padding: 5px;
463 }
464 .color_shine {background: rgb(226, 242, 255);}
465 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
466 #comment_form .title {
467  font-weight: normal;
468  margin-bottom: 15px;
469 }
470 #ad_under_post_holder {
471  display: none;
472 }
473 .entrylistTitle {
474  color: #999;
475  font-weight: normal;
476  margin-bottom: 30px;
477  text-shadow: 0 0 1px #fff;
478 }
479 .entrylistTitle:before {
480  font-family: FontAwesome;
481  content: '\f07b';
482  padding-right: 15px;
483 }
484 .archive {
485  -webkit-box-shadow: 1px 2px 3px #ddd;
486  box-shadow: 1px 2px 3px #ddd;
487  border-bottom: 1px solid #ddd;
488  margin-bottom: 50px;
489 }
490 .archive article {
491  -webkit-box-shadow: none;
492  box-shadow: none;
493 }
494 .archive article .post-content {
495  margin-bottom: 0;
496 }
497 #sideBar{
498  width: 22%;
499  line-height: 1.8em;
500  float: right;
501 }
502 @media screen and (max-width: 900px) {
503  #sideBar { 504  float: none;
505  width: 100%;
506   }
507 } 508 .catListLink, .catListMyTeams, .catListComment, .catListFeedback {
509  display: none;
510 }
511 .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {
512  background: #fff;
513  -webkit-box-shadow: 1px 2px 3px #ddd;
514  box-shadow: 10px 10px 10px #ddd;
515  margin-bottom: 30px;
516  word-wrap: break-word;
517  border-radius: 10px;
518  margin-top: 10px;
519  border: 1px solid #ddd;
520 }
521 #blog-sidecolumn h3, .newsItem h3 {
522  padding: 15px 20px;
523  font-size: 1em;
524  border-bottom: 1px solid #ddd;
525  font-weight: normal;
526 }
527 #blog-sidecolumn ul, .newsItem #blog-news {
528  font-size: 0.9em;
529  padding: 15px 20px;
530 }
531 #blog-sidecolumn ul, 532 #blog-sidecolumn ol, 533 #blog-sidecolumn dl {
534  list-style: none;
535 }
536 #blog-sidecolumn ul ul, 537 #blog-sidecolumn ol ul, 538 #blog-sidecolumn dl ul, 539 #blog-sidecolumn ul ol, 540 #blog-sidecolumn ol ol, 541 #blog-sidecolumn dl ol, 542 #blog-sidecolumn ul dl, 543 #blog-sidecolumn ol dl, 544 #blog-sidecolumn dl dl {
545  list-style: disc;
546  margin-left: 20px;
547 }
548 #q {
549  background: #fff;
550  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
551  font-style: italic;
552  font-size: 1em;
553  padding: 10px 15px;
554  border: 1px solid #ddd;
555  width: 100%;
556  -webkit-box-sizing: border-box;
557  -moz-box-sizing: border-box;
558  box-sizing: border-box;
559  color: #999;
560  height: 100%;
561 }
562 #q:focus {
563  color: #444;
564 }
565 /*隱藏搜索框中的無用組件*/
566 .mySearch {
567  display: none;
568 }
569 
570 #sideBar .tag small {
571  margin-left: 15px;
572  color: #999;
573 }
574 #sideBar .tag small:before {
575  content: '(';
576 }
577 #sideBar .tag small:after {
578  content: ')';
579 }
580 #sideBar .twitter li {
581  border-bottom: 1px solid #ddd;
582  padding: 15px 20px;
583  font-size: 0.9em;
584 }
585 #sideBar .twitter li:last-of-type {
586  border-bottom: none;
587 }
588 #sideBar .twitter small {
589  display: block;
590  margin-top: 10px;
591  color: #999;
592  line-height: 1;
593 }
594 #sideBar .tagcloud .entry {
595  padding-right: 5px;
596 }
597 #sideBar .tagcloud a {
598  margin-right: 10px;
599  display: inline-block;
600 }
601 #footer {
602  color: #999;
603  margin-bottom: 50px;
604  font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
605  text-shadow: 0 0 1px #fff;
606  text-align:center;
607  margin: 30px 0px 50px;
608 }
609 .entry .gist {
610  background: #eee;
611  border: 1px solid #ddd;
612  margin-top: 15px;
613  padding: 7px 15px;
614  -webkit-border-radius: 2px;
615  border-radius: 2px;
616  text-shadow: 0 0 1px #fff;
617  line-height: 1.6;
618  overflow: auto;
619  color: #666;
620 }
621 .entry .gist .gist-file {
622  border: none;
623  font-family: inherit;
624  margin: 0;
625  font-size: 0.9em;
626 }
627 .entry .gist .gist-file .gist-data {
628  background: none;
629  border-bottom: none;
630 }
631 .entry .gist .gist-file .gist-data pre {
632  padding: 0 !important;
633  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
634 }
635 .entry .gist .gist-file .gist-meta {
636  background: none;
637  color: #999;
638  margin-top: 5px;
639  padding: 0;
640  text-shadow: 0 0 1px #fff;
641  font-size: 100%;
642 }
643 .entry .gist .gist-file .gist-meta a {
644  color: #258fb8;
645 }
646 .entry .gist .gist-file .gist-meta a:visited {
647  color: #258fb8;
648 }
649 figure.highlight {
650  background: #eee;
651  border: 1px solid #ddd;
652  margin-top: 15px;
653  padding: 7px 15px;
654  -webkit-border-radius: 2px;
655  border-radius: 2px;
656  text-shadow: 0 0 1px #fff;
657  line-height: 1.6;
658  overflow: auto;
659  position: relative;
660  font-size: 0.9em;
661 }
662 figure.highlight figcaption {
663  color: #999;
664  margin-bottom: 5px;
665  text-shadow: 0 0 1px #fff;
666 }
667 figure.highlight figcaption a {
668  position: absolute;
669  right: 15px;
670 }
671 figure.highlight pre {
672  border: none;
673  padding: 0;
674  margin: 0;
675 }
676 figure.highlight table {
677  margin-top: 0;
678  border-spacing: 0;
679 }
680 figure.highlight .gutter {
681  color: #999;
682  padding: 7px 10px 7px 5px !important;
683  border-right: 1px solid #ddd;
684  text-align: right;
685 }
686 figure.highlight .code {
687  padding: 7px 7px 7px 10px !important;
688  border-left: 1px solid #fff;
689  color: #666;
690 }
691 pre .comment, 692 pre .template_comment, 693 pre .diff .header, 694 pre .doctype, 695 pre .pi, 696 pre .lisp .string, 697 pre .javadoc {
698  color: #93a1a1;
699  font-style: italic;
700 }
701 pre .keyword, 702 pre .winutils, 703 pre .method, 704 pre .addition, 705 pre .css .tag, 706 pre .request, 707 pre .status, 708 pre .nginx .title {
709  color: #859900;
710 }
711 pre .number, 712 pre .command, 713 pre .string, 714 pre .tag .value, 715 pre .phpdoc, 716 pre .tex .formula, 717 pre .regexp, 718 pre .hexcolor {
719  color: #2aa198;
720 }
721 pre .title, 722 pre .localvars, 723 pre .chunk, 724 pre .decorator, 725 pre .built_in, 726 pre .identifier, 727 pre .vhdl, 728 pre .literal, 729 pre .id {
730  color: #268bd2;
731 }
732 pre .attribute, 733 pre .variable, 734 pre .lisp .body, 735 pre .smalltalk .number, 736 pre .constant, 737 pre .class .title, 738 pre .parent, 739 pre .haskell .type {
740  color: #b58900;
741 }
742 pre .preprocessor, 743 pre .preprocessor .keyword, 744 pre .shebang, 745 pre .symbol, 746 pre .symbol .string, 747 pre .diff .change, 748 pre .special, 749 pre .attr_selector, 750 pre .important, 751 pre .subst, 752 pre .cdata, 753 pre .clojure .title {
754  color: #cb4b16;
755 }
756 pre .deletion {
757  color: #dc322f;
758 }
759 .feedbackListSubtitle { position: relative;}
760 .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;}
761 .cnblogs_code_toolbar {display: none;}
762 #cnblogs_post_body {overflow: hidden;}
763 #cnblogs_post_body ol { padding-left: 40px;}
764 #cnblogs_post_body ul { margin-left: 35px;}
765 .fixedReadRank { position: fixed; top: 20px; width: 270px; }
766 .fixedRecRank { position: fixed; top: 360px; width: 270px; }
767 figure.highlight { margin-top: 0; padding: 0;}
768 figure table {width: 100%; margin: 0 !important;}
769 #cnblogs_post_body pre { padding: 0; }
770 #cnblogs_post_body th, #cnblogs_post_body td { padding: 0; }
771 .cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;}
772 .cnblogs_code th {border: 1px solid silver; padding: 3px;}
773 .cnblogs_code { padding: 0;}
774 /*評論標題*/
775 .feedback_area_title {
776  padding:10px;
777  font-size:24px;
778  font-weight:bold;
779  color:#aaa;
780  border-bottom:1px dashed #ccc;
781 }
782 .feedbackListSubtitle {
783  font-size:12px;
784  color:#888;
785 }
786 .feedbackListSubtitle a {
787  color:#888;
788 }
789 .comment_quote {
790  background:#eee;
791  padding:15px;
792  border:1px dashed #aaa;
793 　　 border-radius:5px;
794 }#commentform_title {
795  color:#aaa;
796  background-image:none;
797  background-repeat:no-repeat;
798  margin-bottom:10px;
799  padding:10px 20px 10px 10px;
800  font-size:24px;
801  font-weight:bold;
802  border-bottom:1px dashed #ccc;
803 }
804 /*評論框*/
805 #comment_form {
806  margin:10px 0;
807  padding:25px;
808  border-radius: 10px;
809  height: 343px;
810  overflow: hidden;
811 }
812 .commentform {
813  margin:10px 0;
814  padding:10px 20px;
815  background:#fff;
816 }
817 /*評論輸入域*/
818 #tbCommentBody {
819  font-family:'MIcrosoft Yahei';
820  margin-top:10px;
821  background:white;
822  color:#333;
823  border:2px solid #fff;
824  box-shadow:inset 0 0 8px #aaa;
825  height:120px;
826  font-size:14px;
827  min-height:120px;
828  border-radius: 10px;
829 }
830 /*評論條目*/
831 .feedbackItem {
832  font-size:14px;
833  line-height:24px;
834  margin:10px 0;
835  padding:20px;
836 }
837 .feedbackListSubtitle {
838  font-weight:normal;
839 }
840 
841 /*green_channel*/
842 #green_channel {
843  text:align:right;
844  padding-left:0px;
845  font-weight:normal;
846  font-size:13px;
847  width:100%;
848  border:1px dashed #ccc;
849  color:#fff;
850  border-radius:4px;
851  margin:5px auto;
852 }
853 @media screen and (max-width: 768px) {
854  body { 855  font-size: 13px;
856   }
857  #main{padding:0px !important;}
858  #mainContent{width: 96%;float: left;margin: 0px 2%;}
859  #sideBar {display: none;}
860  #blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;}
861  #header{height:auto !important;margin: 20px auto 5px;}
862  #header #navigator{width: 100%;text-align: center;float:none;}
863  #header #navigator ul{width: 100%;margin-left: 6%;}
864  #header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;}
865  .postTitle, .entrylistPosttitle{font-size:14px;padding: 20px 20px 15px 0px;}
866  .postDesc, .entrylistItemPostDesc{padding: 0px 20px 15px 0px;}
867  #green_channel{padding:0px !important;}
868  #blog_stats{display: none;}
869 } 870 #blog-news label{box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;}
871 #div_digg{
872  padding: 5px;
873  border-radius: 5px;
874  position: fixed;
875  left: 0;
876  bottom: 80px;
877  width:80px;
878  z-index:100;
879 }
880 .diggit{
881 background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
882  width: 60px;
883  height: 60px;
884 }
885 #div_digg .diggnum{
886 position: absolute;
887  bottom: -20px;
888  left: 6px;
889  background: #D0D0D0;
890  padding: 2px 0;
891  display: block;
892  color: #555;
893  font-size: 12px;
894  text-align: center;
895  width: 60px;
896  -moz-border-radius: 4px;
897  -webkit-border-radius: 4px;
898  font-weight: bold;
899 }
900 .buryit{
901 display: none;
902 }
903 div.commentform textarea.comment_textarea{
904  padding:10px;
905 }
906 #tbCommentBody{
907 　　98%; 908 }
909 /*scroll to top*/
910 #scrollTop div{
911  left:0;
912  overflow:hidden;
913  position:absolute;
914  top:0;
915  width:149px;
916  margin:0;
917  padding:0 918 }
919 #scrollTop .level-2{
920  background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
921  display:none;
922  height:250px;
923  opacity:0;
924  z-index:1 925 }
926 #scrollTop .level-3{
927  background:none repeat scroll 0 0 transparent;
928  cursor:pointer;
929  display:block;
930  height:150px;
931  z-index:2 932 }
933 #scrollTop{
934  background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
935  cursor:default;
936  display:block;
937  height:250px;
938  overflow:hidden;
939  position:fixed;
940  right:0;
941  top:80%;
942  width:149px;
943  z-index:11;
944  margin:-125px 0 0;
945  padding:0 946 }
947 /*評論帶頭像，且支持旋轉*/
948 .feedbackCon img:hover {
949 -webkit-transform: rotateZ(360deg);
950 -moz-transform: rotateZ(360deg);
951 -ms-transform: rotateZ(360deg);
952 -o-transform: rotateZ(360deg);
953 transform: rotateZ(360deg);
954 }
955  
956 .feedbackCon img {
957 border-radius: 40px;
958 -webkit-transition: all 0.6s ease-out;
959 -moz-transition: all 0.5s ease-out;
960 -ms-transition: all 0.5s ease-out;
961 -o-transition: all 0.5s ease-out;
962 transition: all 0.5s ease-out;
963 }

推薦一份響應式博客園模板

//使用原始博客皮膚Moonlightlnk

首頁HTML代碼

 1 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"/*設置目錄（首頁HTML代碼）*/>  2 
 3 
 4 
 5 <script type="text/javascript">  6 /*設置當心心*/
 7 (function(window, document, undefined) {
 8  var hearts = [];  9  window.requestAnimationFrame = (function() {  10  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||  11  function(callback) {  12  setTimeout(callback, 1000 / 60);  13         }
 14  })();  15  init();  16  function init() {
 17  css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");  18  attachEvent();  19  gameloop();  20  }  21  function gameloop() {
 22  for (var i = 0; i < hearts.length; i++) {  23  if (hearts[i].alpha <= 0) {  24  document.body.removeChild(hearts[i].el);  25  hearts.splice(i, 1);  26  continue;  27             }
 28  hearts[i].y--;  29  hearts[i].scale += 0.004;  30  hearts[i].alpha -= 0.013;  31  hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;  32  }  33  requestAnimationFrame(gameloop);  34  }  35  function attachEvent() {
 36  var old = typeof window.onclick === "function" && window.onclick;  37  window.onclick = function(event) {  38  old && old();  39  createHeart(event);  40         }
 41  }  42  function createHeart(event) {
 43  var d = document.createElement("div");  44  d.className = "heart";  45  hearts.push({  46  el: d,  47  x: event.clientX - 5,  48  y: event.clientY - 5,  49  scale: 1,  50  alpha: 1,  51  color: randomColor()  52         });  53  document.body.appendChild(d);  54  }  55  function css(css) {
 56  var style = document.createElement("style");  57  style.type = "text/css";  58  try {  59  style.appendChild(document.createTextNode(css));  60         } catch(ex) {
 61  style.styleSheet.cssText = css;  62         }
 63  document.getElementsByTagName('head')[0].appendChild(style);  64  }  65  function randomColor() {
 66  return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";  67     }
 68 })(window, document);  69 </script>  70 
 71 
 72 
 73 
 74 
 75 <script type="text/javascript">  76 /*自定義的鼠標點擊效果*/
 77 /* 鼠標特效 */ 
 78 var a_idx = 0;  79 jQuery(document).ready(function($) { 
 80  $("body").click(function(e) {  81  var a = new Array("富強","民主","文明","和諧","菜鳥-傳奇","自由","平等","公正","法治","菜鳥-傳奇","愛國","敬業","誠信","友善","菜鳥-傳奇");  82  var $i = $("<span/>").text(a[a_idx]);  83  a_idx = (a_idx + 1) % a.length;  84  var x = e.pageX,  85  y = e.pageY;  86  $i.css({  87  "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,  88  "top": y - 20,  89  "left": x,  90  "position": "absolute",  91  "font-weight": "bold",  92  "color": "rgb(72,85,137)"  93         });  94  $("body").append($i);  95  $i.animate({ 
 96  "top": y - 180,  97  "opacity": 0  98         },  99  1500, 100  function() { 
101  $i.remove(); 102         }); 103  }); 104 }); 105 </script>

頁腳HTML代碼

 1 <script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"/*設置目錄（首腳HTML代碼）*/></script> 

 

如此簡單明瞭

  #@---@#   

博客園自定義樣式

//雪花飄落及背景設置(背景圖片經過博客園上傳後獲取---博客園管理>相冊>上傳圖片>點擊圖片>F12查看圖片路徑>替換到下方代碼中) /*CSS代碼*/ #home h1{ font-size:45px; } body{ background-image: url("https://images.cnblogs.com/cnblogs_com/本身的圖片片地址"); background-position: initial; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-origin: initial; background-clip: initial; height:100%; width:100%; } #home{ opacity:0.7; } .wall{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; } div#midground{ background: url("https://i.postimg.cc/PP5GtGtM/midground.png"); z-index: -1; -webkit-animation: cc 200s linear infinite; -moz-animation: cc 200s linear infinite; -o-animation: cc 200s linear infinite; animation: cc 200s linear infinite; } /*div#foreground{ background: url("https://i.postimg.cc/z3jZZD1B/foreground.png"); z-index: -2; -webkit-animation: cc 253s linear infinite; -o-animation: cc 253s linear infinite; -moz-animation: cc 253s linear infinite; animation: cc 253s linear infinite; }*/ div#top{ background: url("https://i.postimg.cc/PP5GtGtM/midground.png"); z-index: -4; -webkit-animation: da 200s linear infinite; -o-animation: da 200s linear infinite; animation: da 200s linear infinite; } @-webkit-keyframes cc { from{ background-position: 0 0; transform: translateY(10px); } to{ background-position: 0 600%; } } @-o-keyframes cc { from{ background-position: 0 0; transform: translateY(10px); } to{ background-position: 0 600%; } } @-moz-keyframes cc { from{ background-position: 0 0; transform: translateY(10px); } to{ background-position: 0 600%; } } @keyframes cc { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } @keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } @-webkit-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } @-moz-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } @-ms-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; } } /*頁首代碼*/

<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>

雪花

/*放在首頁*/
<script> (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:300,flakeColor:"#2894FF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery); $.fn.snow({ minSize: 5, maxSize: 50, newOn: 800, flakeColor: '#00BFFF' }); </script>