之前在某不知名網站上看到過,覺得好酷炫,當時也沒多想怎么寫的。
今天正好手頭上沒有事情在一個技術網站上,又在某技術網站上看到了這個背景,實在是忍不住好奇心,想知道怎么實現的,遂在各個技術群問了一句,沒想到真的有人知道。
demo地址: http://www.luoyuhu.com/
github地址:https://github.com/hustcc/canvas-nest.js
官方tip:使用方法很簡單只需要再body中間插入這段js代碼即可,注意不要放在head里面
<html> <head> ... </head> <body> ... ... ... <script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> </body> </html>
配置:顏色:默認是(0,0,0),格式是(R,G,B)
透明度:(0-1),默認0.5
線段的數量:默認0.5
Z軸:默認-1
使用方法:
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>