当前位置：首页 > 网页特效 > 动画效果

css3 transform属性利用伪元素制作字母卡片开关门3d效果

分类：动画效果日期：2024-05-14 点击(3) 评论(0)

简介

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

#### HTML结构:

------------

```html
<ul class="grid">
 <li class="ot-letter-left">C</li>
 <li class="ot-letter-top">J</li>
 <li class="ot-letter-right">8</li>
 <li class="ot-letter-bottom">A</li>
</ul>
```
#### CSS样式：
为每一个字母的span添加一些基本样式。我们将会为这些字母添加3种样式，字母添加较深的颜色，使字母看起来就像是被从背景中剪出来一样；当打开字母时，阴影将出现。为了达到这些目的，我们将添加perspective属性到span上。这样就能在伪元素上实现一个很好的3d效果。
```css
.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伪元素。
```css
.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属性，确保它以门的左侧为轴旋转。
```css
.ot-letter-left span:before,
.ot-letter-left span:after {
    transform-origin: 0 50%;
}
```
为了使阴影层看起来逼真，我门要在Y轴的:after伪元素上添加一个3D rotation和一些垂直倾斜效果，这样一个阴影效果就做好了，最好为门添加一些厚度。
```css
.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的时候字母将打开，阴影也会相应的变化。
```css
.ot-letter-left:hover span:before {
    transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
    transform: rotateY(-40deg);
}
```
最后添加一些颜色使它看起来更漂亮。
```css
.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控制开门的方向,还可以控制门的旋转角度，倾斜角度等。以下是一个向下开门的例子：
```css
.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);
}
```
你会发现transform-origin总是在门轴的相反方向，调整text-shadow的原理是一样的。

web299.com

css3 transform属性利用伪元素制作字母卡片开关门3d效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果