黑幕效果

本文最后更新于：2 年前

在hexo-fluid中简单实现萌娘百科中的黑幕效果

搞好后发现实在是太简单了，没搞好又百思不得其解。学了一定的 html 后再搞顺了很多，而且每当碰到不懂的知识时顺便了解一下相关知识，这样见的多了就懂了。如果仅仅知其然而不知其所以然，那么即使见了一百遍也不会有太大提高。

介绍

黑幕效果: 给文本添加黑条遮挡，当鼠标放在上面(移动端是长按)是才会显示出文本，可以丰富文章样式，添加交互性和趣味性。

CSS: 全称Cascading Style Sheets，层叠样式表。

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	.heimu:active, .heimu:hover {

​			color: #fff   // 表示鼠标移动在上面时文本变为白色

​	}

​	.heimu {

​			background-color: #252525;

​			color: #252525;

​			text-shadow: none;

​			transtion: color 0.3s;

​	}
解释

  • hover: 选择元素当鼠标移动在上方。

  • background-color: 文本背景颜色。

  • color: 文本颜色。

  • text-shadow: 为文本增加投影。

  • transtion: 使黑幕效果在0.3s内逐渐显现，比较美观。

  • #252525: 表示黑色，由 14.5% 红，14.5% 绿, 14.5% 蓝构成。当然这不是唯一的黑色，你也可以选择 #000000 ，我个人还是觉得 #252525 看起来更舒服。

如果你完全没学过 html ，我强烈建议你在实现黑幕效果前先去简单了解一下 html 语法。在你学过之后你会发现简单的黑幕实现其实非常简单。

插入fluid

在 hexo-fluid 官方配置指南详细介绍了如何导入自定义 css 文件

编写一个 css 文件[1]放在Blog\themes\fluid\source\css 目录下，内容即为上述代码。在_config.yml 文件中找到 coustom_css: 按格式添加该 css 文档。

运行 hexo generate 生成静态文件, 在运行 hexo deploy 部署网址，或直接 hexo g -d 即可。

使用

在编译文本时使用

​ <span class=“heimu” title=“你知道的太多了”> 你的文本 [2]

即可实现。但是表情包，数学公式等无法使用黑幕效果。

主要参考: CSS+JS轻松实现自定义黑幕效果

  1. 这里建议使用 heimu.css 作为文件名 ↩
  2. 这里的[你知道的太多了]可以自定义 ↩
fluid moegirl

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！