用CSS3和HTML5五步打造便签效果（3）
发布时间：2012-04-25 20:47:51
每2个框（即当前框的数目为2的倍数时）向右倾斜4度，距离顶部的偏移量为5像素（top:5px）。每3个框（即当前框的数目为3的倍数时）向左偏移3度，每5个框（即当前框的数目为5的倍数时）向右倾斜5度，距离底部的偏移量为10像素。总的来看，便签的随机倾斜效果如下：
第四步：鼠标悬停时，便签放大
为了让便签引人注目，我们使用了加强了的投影效果，并用CSS3为便签添加了过渡效果。另外，我们需要为每一个浏览器定义过渡效果的scale值：
为确保放大的便签覆盖其它的，我们增大了z-index的值（增加到了5）。因为我们为它应用了：hover和：focus两个伪类，也就意味着当鼠标悬停，或使用键盘的tab键时，便签会产生放大的突出效果：
第五步：添加平滑过渡效果及颜色
最后一步是做一些小变化，让放大效果更平滑，更吸引人。我们使用CSS3中的过渡模型（transition）在不同的浏览器里实现这一效果：
从本质上讲，如果这些元素发生改变（译者注：当鼠标滑过时），不要马上切换到我们所定义效果，经过0.25秒或1秒的过渡时间，这样看起来才自然。另外，我们为这些框进行混色添加，每两个便签（ul li:nth-child（even））填充绿色，每三个便签（ul li:nth-child（3n））填充淡蓝色：
为了看到不同浏览器中所实现的效果，你最好将最后一个展示demo放在其它浏览器中试一下。
总结
我们的便签效果终于完成了，在没借助任何图片和JavaScript，我们实现了便签的倾斜和平滑动画效果。不过该效果只支持FireFox，Opera，Safari和Chrome浏览器，而老式浏览器是不支持倾斜和动画效果的。在nth-child选择器和CSS的变形效果，过渡效果帮助下，我们不用脚本同样达到了自己想要的效果。此外，Google的网络字体API对于自定义字体的使用很简单。hover和focus两个伪类的使用意味着用户通过键盘操作也能看到效果。（jaysming）
0
投稿猜你喜欢
- 修改文件的名字 使用“FileSystemObject(文件系统对象)”的GetFile函数得到一个“文件对象”，然后修改这个“文件对象”的
- 假如你目前需要在Microsoft Access数据库中指示不存在数据，可以在“文本”或&l
- asp无组件上传VBS编写的大家见的多了，这个是纯javascript实现的上传,原来unicode可以解决读取位置的问题，这次真的是纯JS
- 这是个老话题了，之所以再拿出来说，是因为浏览器一直在进步，以前最好的方法现在不一定是最好的。1 如何进行字符串连接？首先让我们来回顾一下字符
阅读系列教程上一篇：FrontPage2002简明教程二：文字与图像的处理通常网页的布局使用到的是FrontPage 2002中的表格和框架- 本文实例介绍了asp对access数据库常见操作方法，查找记录，添加记录更新记录，删除记录等。一、查找记录find.htm<HTML&
- 富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 H
- '************************************* '读取文件 &
- 矛盾出来了，像我们这些小作坊，基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了，我们都有这个能力进行调整。但像大公司
- 1.表达式操作符Table 1 算术操作符操作符 语法 含义+ a + b 相加 - a - b 相减 - - a
- EcmaScript正則表達式( 深入淺出系列之淺出 ^_^ )在线正则表达式测试：http://www.aspxhome.com/RegE
- 如何制作一个搜索引擎链接程序？多收集几个网站的，然后我们引用它到自己的页面中。接下来，我们要创建页面用于搜索：<center>&
- reader.html<html><head><meta http-equiv=&quo
- 方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为
- 平面设计 常用尺寸 三折页广告 标准尺寸: (A4)210mm x 285mm普通宣传册 标准尺寸: (A4)210mm x 285mm文件
- 你用过css么？当然，我是指你喜欢做网页的话，用过？很好，那你用过它的特效么？没有？那请跟我来。让我先
- 在使用ORACLE的过程过，我们会经常遇到一些ORACLE产生的错误，对于初学者而言，这些错误可能有点模糊，而且可能一时不知怎么去处理产生的
- IE6这个东东在前端开发者的眼中恐怕都是一个恶梦之地，我说它万恶想来没人反对吧。依据现在卡当网的访问统计数据来看，从IE6来的访问量还是占到
- Javascript函数类型判断完美解决方案在判断函数类型时，我们通常使用typeof方法，一般情况下，它会得到我们所预想的效果。但是，有一
- 内容摘要：本文是一篇实例讲解的文章。作为一个普通的程序员，我深知，一个优秀的例程，对于正在学习编程的人是多么的有帮助。本文中使用的例程，是一
