在萌娘百科上无意闲逛看到了一些有趣的网页效果,比如网页弹幕和文字黑幕,便决定添加到自己的博客上来。
开始前请注意
本文基于
知识共享 署名-非商业性使用-相同方式共享 3.0 (CC BY-NC-SA 3.0) 许可协议
发布
源码引自
萌娘百科,万物皆可萌的百科全书!
源码地址:
传送门
转载请在开头保留本文链接以及源码链接,并遵循相关协议
内容不可商用!
原理分析
文字背景和字体都设置为黑色，当鼠标选中时高亮
<span style="color:#66ccff; background-color:#66ccff;">黑幕下的文字<span>
然后再弄个自动高亮就ok了
直接放CSS源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
/*
* 请尊重萌娘百科版权，以下代码除非注明均是管理员手敲出来的！！！复制需要注明源自萌娘百科，并且附上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;
}
|
膜拜大佬的源码
基本食用方法
方法很简单
<span class="heimu" title="光标显示内容">黑幕内容</span>
举个栗子
<span class="heimu" title="你知道的太多了">嘿嘿嘿</span>
效果:||嘿嘿嘿||
此CSS支持评论区使用(采用Markdown评论的主题不支持,因为不支持html)
高级食用方法
基本食用方法够用了所以其它高级用法请参见萌娘百科黑幕相关内容
萌娘百科:黑幕模板
萌娘百科:模板讨论:黑幕
欢迎在评论区分享更高级的食用方法