用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
投稿猜你喜欢
什么是 better-scrollbetter-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscro- 1.第一种就是直接调用 window.print()方法这种方法的坏处就是 默认打印整个页面，不能打印局部页面。2.第二种使用v-print
- 背景临时表空间用来管理数据库排序操作以及用于存储临时表、中间排序结果等临时对象，相信大家在开发中经常会遇到相关的需求，下面本文将给大家详细J
- 目录1 timedelta1.1 时间偏移单位为周1.2 时间偏移单位为天1.3 时间偏移单位为小时1.4 时间偏移单位为分钟1.5 时间偏
- Python 界有条不成文的准则： 计算密集型任务适合多进程，IO 密集型任务适合多线程。本篇来作个比较。通常来说多线程相对于多进程有优势，
- SQL Server的作业调度来建立自动备份的方法◆1、进入企业管理器中->管理->sql server代理->作业；◆2
- XMLHTTP对象及其方法－－－－－－－－－－－－－－－－－－MSXML中提供了Microsoft.XMLHTTP对象，能够完成从数据包到R
- Python continue语句：当执行到 continue 语句时，将不再执行本次循环中 continue 语句接下来的部分，而是继续下
- 1.创建vue项目vue create demodemo是项目名称2.安装axios进入demo里面打开终端(黑窗口)，执行npm inst
- 迭代dict的key和value我们了解了如何迭代 dict 的key和value，那么，在一个 for 循环中，能否同时迭代 key和va
- 前言这里要说明一下，本文包含的代码其中一部分并不是自己写的，是我找了很多文章拼凑出来的，比如如何找相同内容的单元格、怎么合并、怎么居中等等。
- 本文介绍一下 Pytorch 中常用乘法的 TensorRT 实现。pytorch 用于训练，TensorRT 用于推理是很多 AI 应用开
- 前言前一篇autoit实现文件上传打包成.exe可执行文件后，每次只能传固定的那个图片，我们实际测试时候希望传不同的图片。这样每次调用的时候
- 主要介绍了SQL删除语句DROP、TRUNCATE、 DELETE 的区别，帮助大家更好的理解和学习sql语句，感兴趣的朋友可以了解下DRO
- 一、设计说明设计这个自动化的目的是想要交替、重复地使用固定的几个分区（分区编号01~05）来保存数据，当最后一个分区就是快满的时候，我们会把
- 共存问题我之前一直使用的是SQL2012版本的数据库管理工具，为了与时俱进，我也尝试更新一下版本，当然SQLServer管理工具是可以多版本
- 最近迷上了高效处理数据的pandas，其实这个是用来做数据分析的，如果你是做大数据分析和测试的，那么这个是非常的有用的！！但是其实我们平时在
- Go批处理语句用于同时执行多个语句使用、切换数据库use mastergo创建、删除数据库方法1、--判断是否存在该数据库，存在就删除if
- 序 言哈喽兄弟们，好久不见！最近实在太忙了，所以又双叒叕断更了~表弟大学快毕业了，学了一个学期Python居然还不会写学生管理系统，真的给我
- python的百分号输出比较奇怪，代码如下print('％s％％'％(5))#这样就能输出‘5％'来源：https:
