網頁 H5“線條” 特效實現方式(canvas-nest)


先上圖 (看博客空白處也可以呦):

前一陣瀏覽網站的時候,發現了這個好玩的東西,一直想找找怎么實現的,今天忙里偷閑,上網搜了一下,發現實現起來特別簡單。

只需要在網頁body里引入一個<script>標簽即可,代碼如下:

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

         (ps:不過從這個地址下載js文件可能會比較慢,想要使用的話可以從Github下載源碼放到本地)

解釋下script上的參數:

count  :線條數量。

zindex :層級。

opacity:透明度。

color   :線條顏色。最好用RGB顏色。

最后附上github上的源碼:canvas-nest.js

 

怎么樣是不是特別簡單^_^。

 (以上,祝愉快!)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM