创意HTML5文字特效 类似翻页的效果

来源:转载

之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页。于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴、Y轴、Z轴进行翻转,先看一下效果截图。

看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转。

我们可以在这里看到DEMO演示效果

接下来我们来看一下源码。首先是HTML代码,非常简单,列出我们需要渲染的文字:

<div class="foo">

<span class="letter" data-letter="A">A</span>

<span class="letter" data-letter="B">B</span>

<span class="letter" data-letter="C">C</span>

<span class="letter" data-letter="D">D</span>

<span class="letter" data-letter="E">E</span>

<span class="letter" data-letter="F">F</span>

<span class="letter" data-letter="G">G</span>

<span class="letter" data-letter="H">H</span>

<span class="letter" data-letter="I">I</span>

<span class="letter" data-letter="L">L</span>

<span class="letter" data-letter="M">M</span>

<span class="letter" data-letter="N">N</span>

<span class="letter" data-letter="O">O</span>

<span class="letter" data-letter="P">P</span>

<span class="letter" data-letter="Q">Q</span>

<span class="letter" data-letter="R">R</span>

<span class="letter" data-letter="S">S</span>

<span class="letter" data-letter="T">T</span>

<span class="letter" data-letter="U">U</span>

<span class="letter" data-letter="V">V</span>

<span class="letter" data-letter="Z">Z</span>

</div>

接下来是核心CSS3代码,这里我们略去了控制页面样式的CSS代码,把实现翻页效果文字的CSS代码提取出来。

.letter{

display: inline-block;

font-weight: 900;

font-size: 8em;

margin: 0.2em;

position: relative;

color: #00B4F1;

transform-style: preserve-3d;

perspective: 400;

z-index: 1;

}

这样我们就让这些字母安安静静的排列起来,并有了自己的背景颜色,等待强大的CSS3来渲染。

接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。

.letter:before, .letter:after{

position:absolute;

content: attr(data-letter);

transform-origin: top left;

top:0;

left:0;

}

.letter, .letter:before, .letter:after{

transition: all 0.3s ease-in-out;

}

.letter:before{

color: #fff;

text-shadow:

-1px 0px 1px rgba(255,255,255,.8),

1px 0px 1px rgba(0,0,0,.8);

z-index: 3;

transform:

rotateX(0deg)

rotateY(-15deg)

rotateZ(0deg);

}

.letter:after{

color: rgba(0,0,0,.11);

z-index:2;

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(0deg)

rotateZ(0deg)

skew(0deg,1deg);

}

.letter:hover:before{

color: #fafafa;

transform:

rotateX(0deg)

rotateY(-40deg)

rotateZ(0deg);

}

.letter:hover:after{

transform:

scale(1.08,1)

rotateX(0deg)

rotateY(40deg)

rotateZ(0deg)

skew(0deg,22deg);

}

这里我们利用了CSS3的伪类before和after来快速构造两个相同的字母,然后利用transform属性的rotateX,rotateY,rotateZ来翻转,再利用skew来时文字倾斜。

由于东西也比较简单,全是代码,没啥好详细解说的,有问题请指正,见笑了,呵呵。

 

 


分享给朋友:
------分隔线----------------------------
您可能感兴趣的文章:
随机阅读: