博客園添加動態背景效果
阿新 • • 發佈:2018-11-24
有趣的 介紹 -- 個數字 files 16px read 其中 The
背景動畫
先直接看效果吧,還是挺有趣的
(來自官網上的一張圖)
使用食用
食用方法
先良心安利js寫的動畫庫。其原理就是基於 HTML5 新特性 canvas,渲染的動畫效果。有興趣可以訪問一下:動畫庫原地址,裏面有使用方法的詳細介紹,這裏不贅述了。
首先下載其中的canvas-nest.js,然後上傳到博客園後臺的文件,得到一個鏈接
然後在博客園-->設置-->頁首Html代碼下,插入以下標簽
1 <!-- 背景動畫 --> 2 <script type="text/javascript" color="0,0,255" opacity=‘0.7‘ zIndex="-2" count="99" src="https://files.cnblogs.com/files/lfri/canvas-nest.js"></script>
- color: 線條顏色,默認:‘0,0,0’;三個數字分別為(R,G,B),註意使用,分割
- opacity: 線條透明度0~1,默認0.5
- count: 線條總數量,默認150
- zIndex: 背景的z-Index屬性,css用於控制所在層的位置,默認-1
參考鏈接:https://dunwu.github.io/blog/2017/11/13/others/cnblog/
博客園添加動態背景效果