博客園特效

　　好羨慕二次元大佬們的博客園，大佬們估計都是禁用模板樣式而後本身寫一套。

然而向我這樣的cai  ji  只能稍微改改樣式。

　　一種是不須要js權限的：

好比在頁腳HTML，頁首HTML里加點結構，

在頁腳HTML裏複製粘貼以下代碼　 　　　　　

<div class="scrollBtn" id="scrollBtn">
  <ul class="clearfix"><li class="sB-goTop" id="goTop" style="display: list-item">
      <a href="#top" title="回頂部"></a>
    </li>
  </ul>
</div>

在頁面定製css裏複製以下代碼：

.scrollBtn {
    position: fixed;
    right: 15px;
    bottom: 45px;
    width: 54px
}

.scrollBtn a {
    display: inline-block;
    width: 54px;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    text-align: center;
    opacity: .6;
    color: #fff;
    background: url(http://images2015.cnblogs.com/blog/459873/201601/459873-20160127210900473-1080897398.png) no-repeat;
    filter: alpha(opacity=60)
}

.scrollBtn li {
    float: left;
    margin-bottom: 5px
}

.scrollBtn a:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}
.scrollBtn a, .scrollBtn li {
    overflow: hidden;
    height: 54px
}

保存設置， 去你的隨筆裏就能夠在右下角看到一個·回到頂部的方塊。

---------------------------------------------------------------------------------------------

再好比給你的博客加個頭像，    在設置裏的標題前面加上：

<span class="portrait"></span>

你的標題

再在頁面定製css裏改下樣式，甚至能夠用css3加上動畫，基礎樣式能夠參考：

.portrait {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-image: url("你的圖片地址");
    background-size: 100% 100%;
    border-radius: 50%;
    background-repeat: no-repeat;
    overflow: hidden;
    transform-origin: center center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

url 改爲 你的圖片地址， 而後保存。

也能夠把全部的css樣式寫在一個文件裏， 而後再點    管理  =》文件   =》  上傳 到博客園，

上傳完成後點擊文件名就能夠看到url 了，而後在頁首HTML裏用link 標籤引入 這個文件：

<link href="你的url" rel="stylesheet">

基於此，若是你想徹底定製你的博客園的話， 就禁用模板css

而後從新寫一套css 引入進去， 怎麼調樣式不用我多說了把，打開谷歌控制檯，調css所見即所得。

ps(樣式沒加上多是權重不夠，實在沒辦法加上!important把權重提到最高)

 

================================================================

然而這樣徹底沒有知足前端童鞋的需求，你須要js權限

 怎麼申請js權限， 很簡單

博客側邊欄公告右邊，若是你沒有js權限的話， 右邊是一個申請權限的按鈕，點擊有個彈窗，

你須要輸入你爲何要申請js權限，你們自由發揮，考驗小學語文的時候到了，而後等1 到 2 個小時就行了。

有js權限之後， 你就能夠引入別人封裝好的特效了，固然牛逼也能夠本身寫。

 

爛大街的特效 ： 1   隨鼠標移動的線條 ， 在頁腳HTML種插入：

　　　　　　　　　　

<script type="text/javascript" color="47,135,193" opacity='0.5' zIndex="-2" count="199" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

參數能夠本身改：  color ： 線條顏色rgb,   opacity：透明的 ， z-indx：層級， count：數量

 

　　　　　　　　2， 雪花飄落，下載jquery 和 jQuery.snow.js 而後上傳到博客園，再用script標籤引入進頁首HTML，

　　　　　　　　嫌麻煩的能夠直接用別人的233333

　　　　　　　　<script src="https://blog-static.cnblogs.com/files/zhonglinke/jquery-1.7.1.min.js"></script>

　　　　　　　　<script src="https://files.cnblogs.com/files/zhonglinke/jquery.snow.js"></script>

　　　　　　　　

　　　　　　　　3 點擊特效  ， 同理複製下面代碼到一個js文件並上傳到博客園

　　　　　　　　　

/* 鼠標特效 
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤","⚡","💎","🔥","☻","☀","😉","🍂","😏",);
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
*/

再用script標籤引入進頁首HTML，  嫌麻煩的直接引入：<script src="https://files.cnblogs.com/files/zhonglinke/my.js"></script> 

 

看到這裏你們應該摸清楚了吧， 理論上來講你想要什麼特效插件， 上最大同性交友網站上搜出來，下載或者克隆到本地

再把壓縮文件上傳到博客園就好了，剩下的道友們自由發揮吧！！！