html5实现的便签特效

最新推荐文章于 2024-03-29 17:33:00 发布

飞鸟zjs

最新推荐文章于 2024-03-29 17:33:00 发布

阅读量1.9k

点赞数

分类专栏： html5+css3 文章标签： html+css3的便签特效

本文链接：https://blog.csdn.net/asdfzjs/article/details/12715213

版权

html5+css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>

飞鸟zjs

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5实现的便签特效

便签 *{ margin:0; padding:0; } body{ font-family:arial,sans-serif; font-size:100%; margin:3em; background:#666 ; color:#fff ; } h2,p{ font-size:100%;
复制链接

扫一扫