一些实用的css字体特效

黑幕

简单地说，就是将字体隐藏，只有把鼠标移上去才会显示内容。

这个其实就是一个简单的hover：

1
2
3
4
5
6
7
8
9

.mask {
  background-color: #252525;
  color: #252525;
  transition: color 0.5s;
  padding: 0 2px
}
.mask:hover {
  color: #ffffff;
}

上面的样式表示，class为mask的内容，背景和字体同色为#252525，并使用了0.5秒的过渡效果。当鼠标移上去时，字体改色为#ffffff。

所以我们就可以这样使用：

1

233<span class="mask">你们看不到我</span>233

字体跳动

当鼠标移上去后，字体就会跳动，这行字的也可以哦，你可以试试。

这里也是用的简单的top属性，就像这样：

1
2
3
4
5
6
7
8

.spring {
  position: relative;
  top: 0px;
  transition-duration: 200ms;
}
.spring:hover {
  top: -4px;
}

将内容样式的position设置成relative，方便我们设置top属性，然后通过hover将top设置成负数而将字体上移。注意top不能设置过大，否则字体容易滑出鼠标位置，导致字体回落。