网站炫酷console.log创意彩蛋收集

定义和用法

console.log() 方法用于在控制台输出信息。
该方法对于开发过程进行测试很有帮助。
提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台，直接查看方法按键组合：Ctrl+Shift+J)。

彩蛋实例代码：

以%c开头，后面的文字就打印的信息，后面一个参数就是样式属性；可以尝试多个样式，每碰到一个%c开头就会应用对应的样式，
所有的 console.log() 必须在 ，如下两条！在样式中你可以通过css3属性写彩色字，文字描边等等。

有阴影文字

<script>
console.log("%c[2025ly.cn]", "text-shadow: 3px 1px 1px grey")
console.log("%c[2025ly.cn]", "text-shadow: 3px 1px 1px grey")
</script>

----------

横条上显示文字

这里有个"font-size:2pt"，里面的数字2是可以随便调的，就是调显示大小的意思！

console.log("%c 我跟你讲，你不要在这里乱搞哦！", "font-size:2pt")

背景图片

不要引用我的图片，你可以打开图片地址后，自己保存，因为有时候我可能换图片，把图片删了！

console.log("%c ", "background: url(https://2025ly.cn/usr/uploads/2019/111101/2091979570.png) no-repeat center;padding-left:380px;padding-bottom: 172px;")

折叠菜单下文字

var myObj = { name : "我的记事本", site : "2025ly.cn" };
;
console.log(myObj);

彩色文字

console.log('%c你在看什么？ ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

同条不同颜色文字

console.log("%c 你的左手在哪？ %c 我看到你了 %c 把你的右手拿开", "color:red","","color:orange;font-weight:bold")

带连接版权背景颜色文字

console.log("\n%c 博客 By 我的记事本 %c https://2025ly.cn ","color:#fff;background:#000;padding:5px 0","color:#fff;background:#666;padding:5px 0")

总结

还有N种写法，上面只是其中的几个例子而已，上面的例子也不是真实用意，只是我们拿来做创意彩蛋而已！有名的百度网站好几个页面也有你可以去看下，具体用途就看你自己了，拿来装逼也是不错的，，哈哈哈。。。