当前位置主页 > 资料库 > 前端教程 > 利用css3伪元素制作3d开门效果

利用css3伪元素制作3d开门效果

2014-10-23

查看演示 下载插件

本教程是一个有趣的开关门效果,每个字母就是一个门,我们将使它能够从四个方向打开关闭,这里采用的技术主要是在伪元素上使用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:relativespan上,这是为了使伪元素能够绝对定位。

为了复制字母,我们使用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);
}
                            

你会发现transform-origin总是在门轴的相反方向,调整text-shadow的原理是一样的。

查看演示 下载插件

Previous:
上一篇:没有了
Next:
下一篇:利用css3 3d transform制作超逼真翻书效果
返回顶部