JavaScript - console.log 输出文字加样式（炫酷图案输出）

偏执的太偏执、 2022-09-10 03:09 386阅读 0赞

## 效果图 ##

![（）][13ba6e81d1814da28d5edd0514af3e40.png]

## 实现方法 ##

控制台输出，允许自定义输出样式，实现如上图所示效果代码：

// 清空控制台
    console.clear();
    
    // 输出样式文字
    console.log("%cLKXD\n工控平台\n",
    "text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:6rem"
    )
    
    // 输出火龙图案(网上都有建议自行百度)
    console.log(` ......................................&&......................... ....................................&&&.......................... .................................&&&&............................ ...............................&&&&.............................. .............................&&&&&&.............................. ...........................&&&&&&....&&&..&&&&&&&&&&&&&&&........ ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.............. ................&...&&&&&&&&&&&&&&&&&&&&&&&&&&&&................. .......................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......... ...................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............... ..................&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&............ ...............&&&&&@ &&&&&&&&&&..&&&&&&&&&&&&&&&&&&&........... ..............&&&&&&&&&&&&&&&.&&....&&&&&&&&&&&&&..&&&&&......... ..........&&&&&&&&&&&&&&&&&&...&.....&&&&&&&&&&&&&...&&&&........ ........&&&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&....&&&....... .......&&&&&&&&.....................&&&&&&&&&&&&&&&&.....&&...... ........&&&&&.....................&&&&&&&&&&&&&&&&&&............. ..........&...................&&&&&&&&&&&&&&&&&&&&&&&............ ................&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&............ ..................&&&&&&&&&&&&&&&&&&&&&&&&&&&&..&&&&&............ ..............&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&....&&&&&............ ...........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&......&&&&............ .........&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&.........&&&&............ .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&............ ......&&&&&&&&&&&&&&&&&&&...&&&&&&...............&&&............. .....&&&&&&&&&&&&&&&&............................&&.............. ....&&&&&&&&&&&&&&&.................&&........................... ...&&&&&&&&&&&&&&&.....................&&&&...................... ...&&&&&&&&&&.&&&........................&&&&&................... ..&&&&&&&&&&&..&&..........................&&&&&&&............... ..&&&&&&&&&&&&...&............&&&.....&&&&...&&&&&&&............. ..&&&&&&&&&&&&&.................&&&.....&&&&&&&&&&&&&&........... ..&&&&&&&&&&&&&&&&..............&&&&&&&&&&&&&&&&&&&&&&&&......... ..&&.&&&&&&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&&&&&&&&&&&&....... ...&&..&&&&&&&&&&&&.........&&&&&&&&&&&&&&&&...&&&&&&&&&&&&...... ....&..&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&...........&&&&&&&&..... .......&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&..............&&&&&&&.... .......&&&&&.&&&&&&&&&&&&&&&&&&..&&&&&&&&...&..........&&&&&&.... ........&&&.....&&&&&&&&&&&&&.....&&&&&&&&&&...........&..&&&&... .......&&&........&&&.&&&&&&&&&.....&&&&&.................&&&&... .......&&&...............&&&&&&&.......&&&&&&&&............&&&... ........&&...................&&&&&&.........................&&&.. .........&.....................&&&&........................&&.... ...............................&&&.......................&&...... ................................&&......................&&....... .................................&&.............................. ..................................&.............................. `
    )

[13ba6e81d1814da28d5edd0514af3e40.png]: /images/20220829/76deec8313dd4b5d85e786d77515d99f.png