DIY cnblog——背景漸變切換
- 2019 年 10 月 6 日
- 筆記
進來的小夥伴應該已經看過了我的博客樣式，但還是貼張圖先：
先大致說一下實現的思路，然後把代碼貼出來供小夥伴們參考。
由於不是特別技術性的文章，格式就放寬鬆一點，跟着意識流走吧。
先跟大家分享一個漸變背景素材的網站：
大家進去會發現是這樣的：
這是一個CSS做的漸變特效，複製了CSS之後就可以直接用了，複製的代碼是
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
我在做漸變背景的思路大致是這樣的，挑選出喜歡的漸變特效，創建一個數組保存，之後採用隨機數和定時器來切換背景顏色。
小夥伴們按照序號來讀會比較清晰
<script> var bc = [ //1.創建一個數組保存漸變的顏色 "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)", "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)", "linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)", "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)", "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)", "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)", "linear-gradient(to top, #d299c2 0%, #fef9d7 100%)", "linear-gradient(to top, #9890e3 0%, #b1f4cf 100%)", "linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%)", "linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%)", "linear-gradient(to top, #fff1eb 0%, #ace0f9 100%)", "linear-gradient(to top, #accbee 0%, #e7f0fd 100%)", "linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%)", "linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)", "linear-gradient(to top, #9795f0 0%, #fbc8d4 100%)", "linear-gradient(to top, #88d3ce 0%, #6e45e2 100%)", "linear-gradient(to top, #d9afd9 0%, #97d9e1 100%)", "linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%)", "linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%)", "linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%)", "linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%)", "linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%)" ]; changeBackground();//4.突發奇想，除了每隔10s切換一次，還有哪些其他觸發事件呢？沒錯，就是刷新 //頁面每次刷新都會重新加載代碼，所以changeBackground();主要是為了在刷新頁面時更換背景顏色的。 function changeBackground() { //2.定義生成隨機數和切換背景的函數 var color_string = bc[Math.floor(Math.random() * 22)]; $("body").css("background-image", color_string); } $(function () { $("body").css("background-attachment", "fixed"); setInterval(changeBackground, 10000); //3.設置定時器，每隔10s更換一次背景 }); </script>
關於背景漸變的部分就這麼多了。
除了背景漸變之外，還有一些其他的DIY代碼我也一起貼出來（下面是第一次DIY的全部代碼，感興趣的小夥伴們也可以自己試試）
大家還是按照序號來看就好了：
對了，先註明，我是默認選了下面這款皮膚：
<style> #header { //1.由於要自定義頁首，所以將原先的頁首隱藏掉 display: none; } body { //3.這個是修改背景顏色在滾動狀態下依然是垂直平鋪的 background: fixed; } body, div, h1, h2, h3, h4, h5, h6, ul, li, img { //4.這個是定義邊框的圓角的，像分類和分頁都是圓角顯示 border-radius: 15px; } .sidebar-block { //5.這是一個細節，分類的背景默認是白色，如果有圓角邊框的話就會多出來，於是將背景顏//色設置為透明 background-color: transparent; } #sideBar li { //6.這是設置分類側欄邊標籤的背景顏色和字體大小 background-color: white; font-size: 16px; } .sidebar-block ul li a:hover { //7.設置右側分類標籤鏈接屬性，當鼠標進去時，字體顏色為黑色，字體增大 color: black; font-size: 17px; } .sidebar-block h3 { //7.這是設置隨筆分類那四個字的樣式的，其中背景為漸變 border: 0px; margin-bottom: 3px; background-image: linear-gradient(to right, #434343 0%, black 100%); font-size: 25px; } .sidebar-block ul li { //8.寫不下去了，這樣寫得累死，直接跳到下面，分享一下怎麼調代碼 line-height: 1; } .catListView { background: transparent; } #sideBar ul { border: 0px; } .class-mouseenter { width: 400px; } .day .postTitle2 { font-size: 28px; } .c_b_p_desc { font-size: 20px; } #topics .postTitle { text-align: center; font-size: 35px; margin-bottom: 100px; border-bottom: 2px solid; } #sideBar { position: absolute; right: 3%; } .day { width: 125%; } #topics { width: 125%; } #cnblogs_post_body p { font-size: 18px } #cnblogs_post_body ul li { font-size: 16px; } </style> <div id="header-new"> //2.這個就是自定義的頁首了，刪掉了導航欄，就留了一個標題 <div id="blogTitle"> <h1> <a id="Header1_HeaderTitle" class="headermaintitle" href="https://www.cnblogs.com/noneplus/">Noneplus</a> </h1> </div> </div> // <script> var bc = [ "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)", "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)", "linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)", "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)", "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)", "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)", "linear-gradient(to top, #d299c2 0%, #fef9d7 100%)", "linear-gradient(to top, #9890e3 0%, #b1f4cf 100%)", "linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%)", "linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%)", "linear-gradient(to top, #fff1eb 0%, #ace0f9 100%)", "linear-gradient(to top, #accbee 0%, #e7f0fd 100%)", "linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%)", "linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)", "linear-gradient(to top, #9795f0 0%, #fbc8d4 100%)", "linear-gradient(to top, #88d3ce 0%, #6e45e2 100%)", "linear-gradient(to top, #d9afd9 0%, #97d9e1 100%)", "linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%)", "linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%)", "linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%)", "linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%)", "linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%)" ]; changeBackground(); function changeBackground() { var color_string = bc[Math.floor(Math.random() * 22)]; $("body").css("background-image", color_string); } $(function () { $("body").css("background-attachment", "fixed"); setInterval(changeBackground, 10000); }); </script>
首先需要一個瀏覽器（廢話），這裡我用Chrome瀏覽器來截圖，其他的應該差不了多少。
按下神奇的F12鍵：
這個該怎麼描述呢。。。
···
思考30s…..
···
兩個框，其中一個Elements是網頁的源代碼，右邊的Styles框就是對於的CSS樣式了。
嗯，知道這一點之後，再看一個神奇的鍵：
這個鍵，當你點擊它一下，會神奇的變藍，這是啥意思呢？
截了幾十次終於截下來了：
就是在這個頁面里選擇一個元素然後審查它。
大致的效果是這樣的，當你點它一下變藍以後：
然後我選擇點擊這個頁首：
然後在這邊就會定位到哪段代碼以及它的Style：
walk to a question:如何調試代碼呢？
由於博客園支持定製的部分有限，更多的是調製CSS來控制頁面顯示。
比如說，我想讓頁首的標題變大一點：
額，給自己挖了個坑：（調試之前要先定位到標題）
然後這邊：
已經定位過來了，然後修改箭頭所指方向：
點擊空白處，就會新增一個屬性：（可以慢慢試，網頁是不會壞的）
然後我已經設置了font-size為100px：
頁面顯示：
再次刷新頁面時，新增的部分就會消失。
洋洋洒洒寫了很多，大致頁面就是這樣調試的，調幾步之後就把對應的代碼保存起來。然後提交到cnblog看看實際的效果。由於內置了模板，很多函數和預先定義的CSS不方便修改，所以，如果調試代碼沒有起作用，放寬心換條代碼試試也許就行了。
改完之後，將代碼複製到頁首即可：
cnblog提供了四個可以上傳代碼的地方，上傳到頁首會生成一個id為page_begin_html的div，
其他三個地方，頁腳，側邊欄和頁面定製CSS應該都是向頁面中插入代碼：
除了html會產生標籤外，css，script除了頁面定製CSS中，應該都是兼容的。
那麼這篇文章就到這裡了，做一個小結吧：
- 背景漸變切換
- 樣式定製與Chrome調試
- 代碼上傳（to be continued）
