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

作者:依旧廖凯
  • 2021 年 3 月 14 日
  • 本文字数:777 字

    阅读完需:约 3 分钟

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

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

原理分析

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

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

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


直接放 CSS 源码

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)

欢迎在评论区分享更高级的食用方法

欢迎在本文章评论区测试效果!


发布于: 2021 年 03 月 14 日阅读数: 114
用户头像

依旧廖凯

关注

还未添加个人签名 2021.02.27 加入

还未添加个人简介

评论

发布
暂无评论
给你的网站文字添加黑幕-隐藏文字_28天写作_依旧廖凯_InfoQ写作社区