当前位置:   article > 正文

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

html 开关门效果

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/834698
推荐阅读
相关标签
  

闽ICP备14008679号