html5实现的便签特效(实战分享)


Posted in HTML / CSS onNovember 29, 2013

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>便签</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-family:arial,sans-serif;
font-size:100%;
margin:3em;
background:#666 ;
color:#fff ;
}
h2,p{
font-size:100%;
font-weight:normal;
}
ul,li{
list-style:none;
}
ul{
overflow:hidden;
padding:3em;
}
ul li a{
text-decoration:none;
color:#000 ;
background:#ffc ;
display:block;
height:10em;
width:10em;
padding:1em;
}
ul li{
margin:1em;
float:left;
}
ul li h2
{
font-size: 140%;
font-weight: bold;
padding-bottom: 10px;
}
ul li p
{
font-family: “Reenie Beanie” ,arial,sans-serif,微软雅黑;
font-size: 110%;
}
ul li a
{
text-decoration: none;
color: #000 ;
background: #ffc ;
display: block;
height: 10em;
width: 10em;
padding: 1em; /* Firefox */
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1) ; /* Safari+Chrome */
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7) ; /* Opera */
box-shadow: 5px 5px 7px rgba(33,33,33,.7) ;
}
ul li a{
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
}
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
position:relative;
top:-10px;
}
ul li a:hover,ul li a:focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7) ;
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7) ;
box-shadow:10px 10px 7px rgba(0,0,0,.7) ;
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
background:#cfc ;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
background:#ccf ;
}
</style>
<link href=”http://fonts.googleapis.com/css?family=Reenie+Beanie:regular” rel=”stylesheet” type=”text/css”>
</head>
<body>
<ul>
<li><a href=”#”>
<h2>Dudu:</h2>
<p>最近咋没有美女发帖呢?我一定给个头条推荐,recommend!recommend!</p>
</a></li>
<li><a href=”#”>
<h2>汤姆大叔:</h2>
<p>Team的一个成员去了Microsoft做SDE3,又得hire new member了</p>
</a></li>
<li><a href=”#”>
<h2>技术弟弟:</h2>
<p>O2DS和我翻译的书是一样,我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
</a></li>
<li><a href=”#”>
<h2>Artech:</h2>
<p>WCF的帖子真是少,看来我得多发点帖子让大家学习呢</p>
</a></li>
<li><a href=”#”>
<h2>吉日嘎拉:</h2>
<p>将权限管理、工作流管理做到我能力的极致,一个人只能做好那么很少的几件事情</p>
</a></li>
<li><a href=”#”>
<h2>某武林高手:</h2>
<p>低于25000块的面试再也不去了,它grandma的</p>
</a></li>
</ul>
</body>
</html>
HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 #HTML / CSS
HTML5样式控制示例代码
Nov 27 #HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 #HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 #HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 #HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 #HTML / CSS
HTML5语音识别标签写法附图
Nov 18 #HTML / CSS
You might like
PHP操作数组相关函数
2011/02/03 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
深入理解PHP中的count函数
2016/05/31 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
不安全的常用的js写法
2009/09/15 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
js实现简单计算器
2015/11/22 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Python中itertools模块用法详解
2014/09/25 Python
python使用Matplotlib画条形图
2020/03/25 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
人事主管岗位职责
2014/01/30 职场文书
故宫的导游词
2015/01/31 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
MySQL约束超详解
2021/09/04 MySQL
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
Apache自带的ab压力测试工具的实现
2022/07/23 Servers