标签:
之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页。于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴、Y轴、Z轴进行翻转,先看一下效果截图。
看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转。
接下来我们来看一下源码。首先是HTML代码,非常简单,列出我们需要渲染的文字:
接下来是核心CSS3代码,这里我们略去了控制页面样式的CSS代码,把实现翻页效果文字的CSS代码提取出来。
这样我们就让这些字母安安静静的排列起来,并有了自己的背景颜色,等待强大的CSS3来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。
这里我们利用了CSS3的伪类before和after来快速构造两个相同的字母,然后利用transform属性的rotateX,rotateY,rotateZ来翻转,再利用skew来时文字倾斜。
标签:
原文地址:http://www.cnblogs.com/ha-ck/p/5497798.html