给你的网站文字添加黑幕-隐藏文字

在萌娘百科上无意闲逛看到了一些有趣的网页效果,比如网页弹幕和文字黑幕,便决定添加到自己的博客上来。

开始前请注意

本文基于知识共享 署名-非商业性使用-相同方式共享 3.0 (CC BY-NC-SA 3.0) 许可协议发布
源码引自萌娘百科,万物皆可萌的百科全书!
源码地址:传送门
转载请在开头保留本文链接以及源码链接,并遵循相关协议
内容不可商用!

原理分析

文字背景和字体都设置为黑色,当鼠标选中时高亮

<span style="color:#66ccff; background-color:#66ccff;">黑幕下的文字</span>

然后再弄个自动高亮就ok了

直接放CSS源码


/* 
 * 请尊重萌娘百科版权,以下代码除非注明均是管理员手敲出来的!!!复制需要注明源自萌娘百科,并且附上URL地址http://zh.moegirl.org/MediaWiki:Common.css
 * 版权协定:知识共享 署名-非商业性使用-相同方式共享 3.0
 * 复制之后请把图片换成自己网站上URL地址!
 */
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited {
    color: #252525;
}
.heimu,
.heimu a,
a .heimu,
.heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off {
    transition: color .13s linear;
    color: white;
}
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off {
    transition: color .13s linear;
    color: lightblue;
}
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off {
    transition: color .13s linear;
    color: #BA0000;
}

膜拜大佬的源码

把上面的内容添加到网站CSS即可

基本食用方法

方法很简单


<span class="heimu" title="光标显示内容">黑幕内容</span>

举个栗子


<span class="heimu" title="你知道的太多了">嘿嘿嘿</span>

效果:嘿嘿嘿
此CSS支持评论区使用(采用Markdown评论的主题不支持,因为不支持html)

高级食用方法

基本食用方法够用了所以其它高级用法请参见萌娘百科黑幕相关内容
萌娘百科:黑幕模板
萌娘百科:模板讨论:黑幕
欢迎在评论区分享更高级的食用方法

欢迎在本文章评论区测试效果!
点赞
  1. 乐心湖说道:
    Google Chrome Windows 10

    这个不错,有时间折腾一下

  2. Yusorai说道:
    Google Chrome Windows 10

    如果只是想要鼠标放在上面或手机上摁住就能显示黑幕的话,CSS 可以简化一下:
    .heimu {
    background-color: black;
    color: black;
    text-shadow: none;
    }
    .heimu:hover,
    .heimu:active {
    color: white;
    transition: color .13s;
    }
    (好久没碰 CSS 了,应该没写错什么吧(逃

    1. Yusorai说道:
      Google Chrome Windows 10

      缩进果然没了.png

      1. 白 说道:
        Google Chrome Windows 10

        膜拜大佬 :huaji22:

  3. Google Chrome Windows 10

    有♂趣

    1. 白 说道:
      Google Chrome Windows 10

      有♂趣

  4. 呵呵君说道:
    Firefox Windows 7

    挺好玩的,顺便把你文章转载(重写)了一下 |´・ω・)ノ
    转载地址https://hehejun.cn/216.html

    1. 白 说道:
      Google Chrome Windows 10

      没问题的,只是记得注意保留相关链接,并按照知识共享 署名-非商业性使用-相同方式共享 3.0 (CC BY-NC-SA 3.0) 许可协议发布

  5. 白 说道:
    Google Chrome Windows 10

    欢迎评论测试效果

发表评论

电子邮件地址不会被公开。必填项已用 * 标注