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


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







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

DEMO演示效果


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

  1. <div class="foo">
  2.   <span class="letter" data-letter="A">A</span>
  3.   <span class="letter" data-letter="B">B</span>
  4.   <span class="letter" data-letter="C">C</span>
  5.   <span class="letter" data-letter="D">D</span>
  6.   <span class="letter" data-letter="E">E</span>
  7.   <span class="letter" data-letter="F">F</span>
  8.   <span class="letter" data-letter="G">G</span>
  9.   <span class="letter" data-letter="H">H</span>
  10.   <span class="letter" data-letter="I">I</span>
  11.   <span class="letter" data-letter="L">L</span>
  12.   <span class="letter" data-letter="M">M</span>
  13.   <span class="letter" data-letter="N">N</span>
  14.   <span class="letter" data-letter="O">O</span>
  15.   <span class="letter" data-letter="P">P</span>
  16.   <span class="letter" data-letter="Q">Q</span>
  17.   <span class="letter" data-letter="R">R</span>
  18.   <span class="letter" data-letter="S">S</span>
  19.   <span class="letter" data-letter="T">T</span>
  20.   <span class="letter" data-letter="U">U</span>
  21.   <span class="letter" data-letter="V">V</span>
  22.   <span class="letter" data-letter="Z">Z</span>
  23. </div>
复制代码         
      接下来是核心CSS3代码,这里我们略去了控制页面样式的CSS代码,把实现翻页效果文字的CSS代码提取出来。

  1. .letter{
  2.   display: inline-block;
  3.   font-weight: 900;
  4.   font-size: 8em;
  5.   margin: 0.2em;
  6.   position: relative;
  7.   color: #00B4F1;
  8.   transform-style: preserve-3d;
  9.   perspective: 400;
  10.   z-index: 1;
  11. }
复制代码
      这样我们就让这些字母安安静静的排列起来,并有了自己的背景颜色,等待强大的CSS3来渲染。

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

  1. .letter:before, .letter:after{
  2.   position:absolute;
  3.   content: attr(data-letter);
  4.   transform-origin: top left;
  5.   top:0;
  6.   left:0;
  7. }
  8. .letter, .letter:before, .letter:after{
  9.   transition: all 0.3s ease-in-out;
  10. }
  11. .letter:before{
  12.   color: #fff;
  13.   text-shadow:
  14.     -1px 0px 1px rgba(255,255,255,.8),
  15.     1px 0px 1px rgba(0,0,0,.8);
  16.   z-index: 3;
  17.   transform:
  18.     rotateX(0deg)
  19.     rotateY(-15deg)
  20.     rotateZ(0deg);
  21. }
  22. .letter:after{
  23.   color: rgba(0,0,0,.11);
  24.   z-index:2;
  25.   transform:
  26.     scale(1.08,1)
  27.     rotateX(0deg)
  28.     rotateY(0deg)
标签: html5

更多 html5 相关资讯

18个HTML5和JavaScript游戏引擎库

18个HTML5和JavaScript游戏引擎库

1) Best HTML5 and javascript game engine Library- Impactjs 2) Best HTML5 and javascript game engine Library - Craftyjs 3) Best HTML5 and javascript game engi

7款HTML5精美应用教程 让你立即爱上HTML5

7款HTML5精美应用教程 让你立即爱上HTML5

你喜欢HTML5吗?我想下面的这7个HTML5应用一定会让你爱上HTML5的,不信就一起来看看吧。1、HTML5/jQuery雷达动画图表 图表配置十分简单之前我们介绍过不少形形色色的HTML5图表

HTML5体验改进的14条军规

来自公园《HTML5——用新方式创造更好的用户体验》线下活动中来自火速轻应用的技术总监胡敏东的分享。 1. fake 页 - 首屏加速目标:首屏 3s 以内 因为 71% 的用户期望移动页

将HTML5封装成android应用APK文件的几种方法

越来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。一方面,用户在使用习惯上,不喜欢在浏

HTML5里的placeholder属性

HTML5里的placeholder属性

HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder

7种炫酷HTML5 SVG液态水滴融合动画特效

7种炫酷HTML5 SVG液态水滴融合动画特效

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素,如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解,效果

绘制SVG内容到Canvas的HTML5应用

绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融

PHP结合HTML5使用FormData对象提交表单及上传图片

PHP结合HTML5使用FormData对象提交表单及上传图片

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。 使用Form

HTML5应用程序缓存Application Cache详解

HTML5应用程序缓存Application Cache详解

什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用。 Applic

10个最常见的 HTML5 面试题及答案

10个最常见的 HTML5 面试题及答案

这是选择了10个 HTML5 面试问题并给出了答案。这是 Web 开发人员最常见的面试问题,相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了。一起来看看吧。 1、新的