html自动开门特效,利用css3伪元素制作3d开门效果

本教程是一个有趣的开关门效果，每个字母就是一个门，我们将使它能够从四个方向打开关闭，这里采用的技术主要是在伪元素上使用CSS transforms and transitions属性。

注意：不是每一个浏览器都支持伪元素，最好是使用Chrome或Firefox浏览器观看。

HTML结构:

C

J

8

A

CSS样式：

为每一个字母的span添加一些基本样式。我们将会为这些字母添加3种样式，字母添加较深的颜色，使字母看起来就像是被从背景中剪出来一样；当打开字母时，阴影将出现。为了达到这些目的，我们将添加perspective属性到span上。这样就能在伪元素上实现一个很好的3d效果。

.grid li span {

display: inline-block;

font-weight: 900;

line-height: 1;

position: relative;

color: hsla(0, 0%, 0%, 0.6);

transform-style: preserve-3d;

perspective: 550px;

z-index: 1;

}

注意：我们添加了position:relative到span上，这是为了使伪元素能够绝对定位。

为了复制字母，我们使用content属性来接收自定义的data-attribute，然后我们将在字母上定位:before和:after伪元素。

.grid li span:before,

.grid li span:after {

position: absolute;

content: attr(data-letter);

line-height: inherit;

top: 0;

left: