HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 HTML5教程 查看内容

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

2014-4-9 11:43| 发布者: html5cn| 查看: 29088| 评论: 4|原作者: xiaobushi009|来自: 博客

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


Z.jpg






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

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)
  29.     rotateZ(0deg)
  30.     skew(0deg,1deg);
  31. }
  32. .letter:hover:before{
  33.   color: #fafafa;
  34.   transform:
  35.     rotateX(0deg)
  36.     rotateY(-40deg)
  37.     rotateZ(0deg);
  38. }
  39. .letter:hover:after{
  40.   transform:
  41.     scale(1.08,1)
  42.     rotateX(0deg)
  43.     rotateY(40deg)
  44.     rotateZ(0deg)
  45.     skew(0deg,22deg);
  46. }

  47. 复制代码
复制代码

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





转自:http://www.cnblogs.com/html5tricks/p/3653672.html


更多
6

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (6 人)

相关阅读

发表评论

最新评论

引用 strawberry 2014-4-9 16:14
学习了,不错。谢谢
引用 h5真的好吗 2014-6-26 14:17
这个效果哪些浏览器支持?
引用 goochas96 2014-7-2 03:11
pocket? Beats By Dre Sverige said the little man, longchamps pas cher with a mixture oakleys of embarrassment and bravado that Outlet Ralph Lauren Sverige touched http://www.dacometrans.com/ Braith, http://www.medicalresources.us/ who mulberry tasker læder saw what the confession http://www.annikaelgstrand.se/ cost mens mulberry bag him. Lots. said Michael Kors Väskor he, cordially. sac longchamp pas cher But first let us try zlatan ibrahimovic tröjor what FOAKLEYS FOR CHEAP we ronaldo tröjor can do http://www.flygen.se/ with messic tröjor Bobby. Do you ever Beats By Dre Sverige drink http://www.clemenshotell.se/mksverige.php a petit OAKLEYS SUNGLASSES verre, http://www.nadeaucenter2.com/ Monsieur sac longchamp le http://www.buurtspoorwegsite.be/ Sergeant jack wills clearance de celine veske kopi Ville? foakleys sunglasses with a winning smile http://www.vivirenespana.es/ to the wooden Beats by dre **man. The latter Fitflop looked Michael Kors Väskor at foakleys the floor. www.medicalresources.us/adidas-colombia-fotbollströjor-matchtröja-hemma-2014-p-1631.html No, Michael Kors Väskor Sverige Online said billige mulberry tasker he. http://www.wzdir.com/ Never? gafas oakley baratas Never. Well, gafas de sol oakley baratas I was Michael Kors Jet Set Läder Totes Svart Sverige only thinking that over on flygen.se the Corner of the Rue foakleys for sale Taitbout Michael Kors Väskor one finds excellent wine Michael Kors Väskor Sverige at twenty mulberry tasker københavn francs. The officer now mulberry tasker kopi gazed Ralph Lauren Sverige Online dreamily FOAKLEYS at Ralph Lauren Sverige the FOAKLEYS FOR SALE ceiling. Mine celine veske norge costs Longchamp Väska Sverige forty, Longchamp Väska Sverige Online he Billiga ralph lauren skjorta said. jack wills outlet And a FOAKLEYS SUNGLASSES FOR SALE few minutes Longchamp Väska later camisetas de futbol baratas th
  
   http://mayiclub.cn/space.php?uid=341735&do=blog&id=5685942
  
   http://bbs.pcpop.com/home.php?mod=spacecp&ac=blog&blogid=
  
   http://www.countryneighborcrafts.com/product/swimsuit-sunglasses#comment-17791
  
   http://forum.thirdcoastsurfshop.com/viewtopic.php?f=3&t=15626
  
   http://www.gzcishan.com/ShowPost.asp?ThreadID=7392
  
   http://bidwindeals.com/blogs/viewstory/2213801
引用 简单的胖子 2014-8-20 12:16
感谢楼主的分享

查看全部评论(4)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-4-26 16:06

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部