简单做出HTML5翻页效果文字特效-H5教程-PHP中文网

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

PHP中文网

发布： 2017-03-24 16:49:26

原创

6110人浏览过

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

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

HTML5翻页效果文字特效

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

接下来我们来看一下源码。首先是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翻页效果文字特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

CSS比较常用的翻转特效

css实现3D立方体旋转特效的示例代码

详细介绍HTML5 3D衣服摇摆动画特效如何实现