萌娘百科的黑幕效果历史悠久、效果拔群,大家都希望能在自己的文章中使用它吧?这篇文章就带领大家学会在自己的文章中加入黑幕效果!
本文所有代码均来自萌娘百科。
萌娘百科打钱!
首先,下面这是黑幕效果的CSS文件代码,这是存在网站服务器外观文件里面的,也就是说黑幕的代码是全网站生效的。但是大家并不需要这个代码
.heimu, .heimu a, a .heimu, .heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
color: #BA0000 !important;
}
大家日常使用时只需要按以下步骤操作即可!:
1、选择新建区块“自定义html”
![图片[1]·萌娘百科黑幕效果教程·零号站台](http://www.notzero.site/wp-content/uploads/2025/11/20251101165429644-16448367741.png)
2、将下面这行代码粘贴进输入框中,并更改相关具体内容(标红的部分) 你想输入的内容(可自由更改)
<span class="heimu" title="你知道的太多了(可自由更改)">你想输入的内容(可自由更改)</span>
3、点击左上角“选项”=>”转化为区块”或“可视化编辑”=>即可完成
![图片[2]·萌娘百科黑幕效果教程·零号站台](http://www.notzero.site/wp-content/uploads/2025/11/20251101165459904-16448372581.png)
4、黑幕完成后就可以进行字号、位置的更改了(你也可以先调整好再搞黑幕)
注意,该黑幕在编辑过程中不会起效,一定要在文章发布后才有作用哦!
下面是示范案例:
<span class="heimu" title="但是他拒绝3片创可贴">本站站长喜欢女装</span>
本站站长喜欢女装
试着把鼠标悬停在黑幕上,就可以看到显示你预设的文字提示了(文字提示在编辑时已经是可用的了)
当然,本文只是非常浅显的小教程,还是希望大家能够更深层次的去学习markdown、CSS相关内容,来让自己的文章更加出彩指变得越来越花里胡哨。
© 版权声明
THE END












暂无评论内容