原文:创意HTML5文字特效 类似翻页的效果

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

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

我们可以在这里看到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:;
font-size: 8em;
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective:;
z-index:;
}

这样我们就让这些字母安安静静的排列起来,并有了自己的背景颜色,等待强大的CSS3来渲染。

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

.letter:before, .letter:after{
position:absolute;
content: attr(data-letter);
transform-origin: top left;
top:;
left:;
}
.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:;
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg);
}
.letter:after{
color: rgba(0,0,0,.11);
z-index:;
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文字特效 类似翻页的效果的更多相关文章

  1. 7款震撼人心的HTML5文字特效

    1.CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加 ...

  2. 基于HTML5手机上下滑动翻页特效

    基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="u-al ...

  3. 3D版翻页公告效果

    代码地址如下:http://www.demodashi.com/demo/12830.html 前言: 在逛小程序蘑菇街的时候,看到一个2D版滚动的翻页公告效果.其实看到这个效果的时候,一点都不觉得稀 ...

  4. jquery 实现智能炫酷的翻页相册效果

    jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离​1. [代码]jquery ...

  5. Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

    经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...

  6. HTML5 book响应式翻页效果

    翻页,HTML5源码下载,HTML5响应式翻页效果,鼠标移到右上角会看到翻页效果,需要鼠标拖动后翻页,支持ie9+,html5浏览器. 单页和双页. 自动播放和暂停. 点击左右翻页. 鼠标点击左右页面 ...

  7. 纯CSS3创意loading文字特效

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  8. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  9. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

随机推荐

  1. 二分图行列匹配---> hdu2119,hdu1498

    hdu2119 题意:给定一个矩形方格,每个格子里面的数字是0或者1,每次操作可以把一整行或列的1变成0,问最少多少次操作能将1全部变为0 一次可以消除某一行或者某一列的1但是可以这么想,最多有多少个 ...

  2. NET 分布式架构开发项目实战

    .NET 分布式架构开发项目实战 从头到尾,一步一步讲述一个真实的项目实战,关注点主要是架构的思考和实现,以及如何解决平时项目遇到的一些问题. 同时也司公布源代码. 如何构建高性能,稳定SOA应用之- ...

  3. 【leetCode百题成就】Gas Station解题报告

    题目: There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. ...

  4. lsb_release: command not found 解决方法(转)

    问题:通过lsb_release -a 是查看linux系统版本时报错,具体的解决办法如下: [root@localhost ~]# lsb_release -a-bash: lsb_release: ...

  5. 移动应用开发(IOS/android等一下)在一般图像缓存方案评述(附流程图)

    在移动应用开发.我们经常从网络请求到该设备显示遇到的场景图片. 假设多次发动每个请求,废物流.浪费电.: 将图片持久化到磁盘也不失为一种策略:但每次从文件读取图片也存在一定的io开销,就算採用此策略, ...

  6. 左右presentViewController经background黑问题

    看效果图: 用例如以下代码,想弹出一个模态窗体,设置它的背景透明度为0.5,却发觉prsent后的背景色变为黑色的. ShareVC *share = [[ShareVC alloc] init]; ...

  7. Android 它们的定义ContentProvider和ContentObserver充分利用

    在他们的定义ContentProvider结合ContentObserver一起使用时,自己写的ContentProvider,在运行完insert.delete和update后,要手动地调用getC ...

  8. 赵雅智_BroadcastReceiver短信监听

    AndroidManifest.xml 注冊广播接收者 加入权限 <?xml version="1.0" encoding="utf-8"?> &l ...

  9. docker 真实---安装基本映像 (一)

    浸泡了几天的官方网站,正确docker有了更好的理解.准备着手建立一个公司的开发和测试环境,包含java.python. 环境介绍 首先说明一下我的环境 2物理server(以后简称为主机) 主机A配 ...

  10. android L新控件RecyclerView具体解释DeMo

    简介 在谷歌的官方网站上,我们可以看到,它是此演示文稿:RecyclerView is a more advanced and flexible version of ListView. This w ...