简单做出HTML5翻页效果文字特效

百变鹏仔 2个月前 (10-18) #H5教程

文章标签翻页

简单做出HTML5翻页效果文字特效

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

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

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

<p 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></p>

接下来是核心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来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。(#00b4f1是什么颜色?#00b4f1是蓝色)

.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来时文字倾斜。

立即学习“前端免费学习笔记（深入）”；

文章推荐

简单做出HTML5翻页效果文字特效

简单做出HTML5翻页效果文字特效

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集