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

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

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

其中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>