接着上期文章讲到在浏览器里控制台的JS css html是有些兼容限制的考虑到这些能力和限制，我们可以做哪些事情呢？这里有一些额外的想法可以激发您的灵感！

关注下方公众号，获取更多热点资讯

渐变效果

console.info(
  '%c ',
  `padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);

线性动画效果

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

粒子效果

❄️飘落的场景

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

奔跑的动画关键帧

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

下面的示例展示了您可以使用 JavaScript 切换 SVG 的文本（使用.textContent，而不是.innerText因为它是 SVG 元素）。话虽如此，由于使用setInterval和requestAnimationFrame6的限制，您无法执行诸如打乱文本效果之类的操作。

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

文字关键帧

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

随机出现关键帧图片

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

输出可跳转链接

代码都在这个链接里哟

响应式尺寸调整

不幸的是，我找不到一种方法让消息跨越控制台宽度的 100%。我相信这是因为我们无法更改控制台中元素的显示，因此像 width: 100% 这样的东西在这里不起作用。该元素必须具有以像素（或其他非相对单位）为单位的明确宽度和高度，否则其大小将基于文本。

我确实注意到它console.table([‘foo’])跨越了整个宽度，但据我所知，我们无法在控制台表上使用 CSS 样式。

将来，我希望浏览器能够在控制台中添加响应式宽度元素。

浏览器支持

以下是 Adobeconsole.info命令在各种浏览器中的外观：铬和边缘这是您在文章前面看到的内容，再次在这里重新发布

火狐浏览器

我们需要做一下更改

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

css-doodle

代码详见GitHub地址 https://github.com/AyongNice/consoleDelight

表情符号在控制台中运行良好。有时，这可能就是您所需要的！

佛祖开光 ,永无BUG

console.log(
   `%c
         ......................我佛慈悲......................
                       _oo0oo_
                      o8888888o
                      88\" . \"88
                      (| -_- |)
                      0\\  =  /0
                    ___/‘---’\\___
                  .' \\|       |/ '.
                 / \\\\|||  :  |||// \\
                / _||||| -卍-|||||_ \\
               |   | \\\\\\  -  /// |   |
               | \\_|  ''\\---/''  |_/ |
               \\  .-\\__  '-'  ___/-. /
             ___'. .'  /--.--\\  '. .'___
          .\"\" ‘<  ‘.___\\_<|>_/___.’ >’ \"\".
         | | :  ‘- \\‘.;‘\\ _ /’;.’/ - ’ : | |
         \\  \\ ‘_.   \\_ __\\ /__ _/   .-’ /  /
     =====‘-.____‘.___ \\_____/___.-’___.-’=====
                       ‘=---=’
                       
....................佛祖开光 ,永无BUG..................
`,
   `font-family: monospace`
);