分享各种网络资源
是我乃至整个互联网的精髓所在
最新公告:
  • 开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
  • 目前站点正在不断折腾和调试中,如有问题请见谅
     您目前所在位置: 站点首页 » 移动互联 » 学习之路 » Chrome Consoles输出指定文字加样式
  • Chrome Consoles输出指定文字加样式

  • 格式
  • 例子
  • 输出图片
  • 很久之前我就已经在我的站点输出了这些指定文字了,大家可以通过 F12 来输出,但是今天我发现更加新奇的东西,于是干脆就直接百度了一下,了解了更多之后才决定告诉大家。

    这里我直接附上相关的效果图;
    Chrome Consoles输出指定文字加样式-BanYuner

    这个效果图还是不错的,如果你想输出更多的话,可以了解下面的信息:

    格式

    console.log("%c需要输出的信息 ", "css 代码");
    
    Format Specifier Description
    %s Formats the value as a string.
    %d or %i Formats the value as an integer.
    %f Formats the value as a floating point value.
    %o Formats the value as an expandable DOM element (as in the Elements panel).
    %O Formats the value as an expandable JavaScript object.
    %c Formats the output string according to CSS styles you provide.

    例子

    例子1:BanYuner

    console.log("%cBanYuner"," 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:5em")
    

    例子2:BanYuner

    console.log("%cBanYuner","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em")
    

    例子3:BanYuner

    console.log('%cBanYuner ', '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", "padding:50px 300px;line-height:120px;background:url('http://www.banyuner.com/wp-content/themes/dux/img/logo1.png') no-repeat;");
    

    上面几种都是对应的方法,具体可以自行实践之后得出的结果。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    Chrome Consoles输出指定文字加样式

    支付宝(点击图片切换)

    扫码,支持我

    Chrome Consoles输出指定文字加样式

    微信(点击图片切换)

    扫码,手机看

    Chrome Consoles输出指定文字加样式
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    Chrome Consoles输出指定文字加样式
    0 + 5 =