CSS3 伪元素制作字母卡片开关门3D效果

PetitQ 文本/链接 2019-1-14 1.79K 0 0

本教程是一个有趣的开关门效果，每个字母就是一个门，我们将使它能够从四个方向打开关闭，这里采用的技术主要是在伪元素上使用 CSS transforms and transitions 属性。注意：不是每一个浏览器都支持伪元素，最好是使用 Chrome 或 Firefox 浏览器观看。

HTML 结构:

```
<ul class="grid">
```

    <li class="ot-letter-left"><span data-letter="C">C</span></li>

    <li class="ot-letter-top"><span data-letter="J">J</span></li>

    <li class="ot-letter-right"><span data-letter="8">8</span></li>

    <li class="ot-letter-bottom"><span data-letter="A">A</span></li>

```
</ul>
```

也想出现在这里？联系我们吧

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: 0;
```
```
    right: 0;
```
```
    bottom: 0;
```
```
    z-index: 2;
```
```
    transition: all 0.3s;
```
```
}
```
```
 
```
```
.grid li span:before {
```
```
    text-shadow: none;
```
```
    color: hsla(0, 0%, 0%, 0.12);
```
```
}
```

这样，现在我们有三个层：第一层是颜色较暗的字母，第二层是:before 伪元素，它是在字母之上的半透明的阴影，第三层是:after 伪元素，它是我们的“门”效果，我们暂时将之称为门。现在，我们就可以制作开门效果了。首先以从右边开门为例，我们将使用 transform-origin 属性，确保它以门的左侧为轴旋转。

```
.ot-letter-left span:before,
```
```
.ot-letter-left span:after {
```
```
    transform-origin: 0 50%;
```
```
}
```

为了使阴影层看起来逼真，我门要在 Y 轴的:after 伪元素上添加一个 3D rotation 和一些垂直倾斜效果，这样一个阴影效果就做好了，最好为门添加一些厚度。

```
.ot-letter-left span:before {
```

    transform: scale(1.08, 1) skew(0deg, 1deg);

```
}
```
```
 
```
```
.ot-letter-left span:after {
```
```
    text-shadow: 
```

        -1px 0px 0px hsla(360, 100%, 100%, 0.1),

        3px 0px 1px hsla(0, 0%, 0%, 0.4);

```
    transform: rotateY(-15deg);
```
```
}
```

真正开门的效果出现在每个 li 元素被:hover 的时候，我们要为相应的伪元素添加更大数值得旋转和倾斜，这样，当鼠标 hover 的时候字母将打开，阴影也会相应的变化。

```
.ot-letter-left:hover span:before {
```

    transform: scale(0.85,1) skew(0deg,20deg);

```
}
```
```
 
```
```
.ot-letter-left:hover span:after {
```
```
    transform: rotateY(-40deg);
```
```
}
```

最后添加一些颜色使它看起来更漂亮。

```
.ot-letter-left { 
```
```
    background: #e74d3c; 
```
```
}
```
```
 
```
```
.ot-letter-left span { 
```
```
    text-shadow: 
```
```
        1px 4px 6px #e74d3c, 
```
```
        0 0 0 hsla(0, 0%, 0%, 0.3), 
```
```
        1px 4px 6px #e74d3c; 
```
```
}
```
```
 
```
```
.ot-letter-left span:after { 
```
```
    color: #e74d3c; 
```
```
}
```
```
 
```
```
.ot-letter-left:hover span:after { 
```
```
    color: #ea6253; 
```
```
}
```

总之，我们可以通过 transform-origin 控制开门的方向,还可以控制门的旋转角度，倾斜角度等。以下是一个向下开门的例子：

```
.ot-letter-bottom span:before,
```
```
.ot-letter-bottom span:after {
```
```
    transform-origin: 50% 0;
```
```
}
```
```
 
```
```
.ot-letter-bottom span:before {
```

    transform: scale(1,1.05) skew(4deg,0deg);

```
}
```
```
 
```
```
.ot-letter-bottom span:after {
```
```
    text-shadow: 
```

        0px -1px 0px hsla(360, 100%, 100%, 0.1),

        0px 3px 1px hsla(0, 0%, 0%, 0.4);

```
    transform: rotateX(15deg);
```
```
}
```
```
 
```
```
.ot-letter-bottom:hover span:before {
```

    transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);

```
}
```
```
 
```
```
.ot-letter-bottom:hover span:after {
```

    transform: translateY(0.045em) rotateX(40deg);

```
}
```

CSS3 伪元素制作字母卡片开关门 3D 效果

已有 448 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

文本/链接

CSS3 伪元素制作字母卡片开关门3D效果

HTML 结构:

CSS 样式：

CSS3 伪元素制作字母卡片开关门 3D 效果

相关文章

jQuery+CSS3鼠标悬停超链接文字动画特效

带阅读进度指示侧边栏列表项UI设计