简单做出HTML5翻页效果文字特效
之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页。于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴、Y轴、Z轴进行翻转,先看一下效果截图。
接下来我们来看一下源码。首先是HTML代码,非常简单,列出我们需要渲染的文字:
接下来是核心CSS3代码,这里我们略去了控制页面样式的CSS代码,把实现翻页效果文字的CSS代码提取出来。
这样我们就让这些字母安安静静的排列起来,并有了自己的背景颜色,等待强大的CSS3来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。
这里我们利用了CSS3的伪类before和after来快速构造两个相同的字母,然后利用transform属性的rotateX,rotateY,rotateZ来翻转,再利用skew来时文字倾斜。
转自:http://www.cnblogs.com/html5tricks/p/3653672.html
看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转。
DEMO演示效果
接下来我们来看一下源码。首先是HTML代码,非常简单,列出我们需要渲染的文字:
- <div 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>
- </div>
接下来是核心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来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。
- .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来时文字倾斜。
转自:http://www.cnblogs.com/html5tricks/p/3653672.html
【简单做出HTML5翻页效果文字特效】相关文章
3. bookblock:可帮助你生成翻页效果的jQuery插件
4. bookblock:可帮助你生成翻页效果的jQuery插件
8. Web VS Native–LinkedIn做出的选择:iPad App95%使用HTML5开发
10. Famo.us,利用 HTML5 做出 3D 手势操作界面
本文来源:https://www.51html5.com/a749.html
﹝简单做出HTML5翻页效果文字特效﹞相关内容
- 基于css3的文字3D翻转特效
- HTML5画布下js的文字云/标签云效果 - D3 Cloud
- jQuery垂直缩略图相册插件 支持鼠标滑动翻页
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
- Google Swiffy 1.0.13 官方英文版(Flash导出HTML5)
- CSS3 HTML5实例三(块阴影与文字阴影)
- Zynga推出HTML5版Farmville等多款新品
- facebook推出HTML5资源中心
- Fortumo公司推出HTML5移动支付系统
- AT&T推出HTML5应用商店及数款新4G手机