pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

html5實(shí)現(xiàn)的便簽特效(實(shí)戰(zhàn)分享)_html5教程技巧

html5實(shí)現(xiàn)的便簽特效(實(shí)戰(zhàn)分享)_html5教程技巧HTML5中文學(xué)習(xí)網(wǎng),是中國(guó)最大的HTML5中文門戶,為廣大HTML5愛(ài)好者提供各種HTML5資料,包括HTML5網(wǎng)站、HTML5資訊、HTML5應(yīng)用、HTML5游戲、HTML5教程、
點(diǎn)評(píng):便簽,想必大家對(duì)這個(gè)詞匯并不會(huì)陌生吧,下文有個(gè)不錯(cuò)的示例可以通過(guò)html5實(shí)現(xiàn)便簽特效,喜歡的朋友可以了解下

復(fù)制代碼
代碼如下:

<!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>最近咋沒(méi)有美女發(fā)帖呢?我一定給個(gè)頭條推薦,recommend!recommend!</p>
</a></li>
<li><a href=”#”>
<h2>湯姆大叔:</h2>
<p>Team的一個(gè)成員去了Microsoft做SDE3,又得hire new member了</p>
</a></li>
<li><a href=”#”>
<h2>技術(shù)弟弟:</h2>
<p>O2DS和我翻譯的書(shū)是一樣,我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>
</a></li>
<li><a href=”#”>
<h2>Artech:</h2>
<p>WCF的帖子真是少,看來(lái)我得多發(fā)點(diǎn)帖子讓大家學(xué)習(xí)呢</p>
</a></li>
<li><a href=”#”>
<h2>吉日嘎拉:</h2>
<p>將權(quán)限管理、工作流管理做到我能力的極致,一個(gè)人只能做好那么很少的幾件事情</p>
</a></li>
<li><a href=”#”>
<h2>某武林高手:</h2>
<p>低于25000塊的面試再也不去了,它grandma的</p>
</a></li>
</ul>
</body>
</html>

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

主站蜘蛛池模板: 电竞馆加盟,沈阳网吧加盟费用选择嘉棋电竞_售后服务一体化 | 吹塑加工_大型吹塑加工_滚塑代加工-莱力奇吹塑加工有限公司 | 刹车盘机床-刹车盘生产线-龙口亨嘉智能装备 | 河南道路标志牌_交通路标牌_交通标志牌厂家-郑州路畅交通 | 线粒体膜电位荧光探针-细胞膜-标记二抗-上海复申生物科技有限公司 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 新材料分散-高速均质搅拌机-超声波分散混合-上海化烁智能设备有限公司 | 立式矫直机_卧式矫直机-无锡金矫机械制造有限公司 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 膜结构_ETFE膜结构_膜结构厂家_膜结构设计-深圳市烨兴智能空间技术有限公司 | 不锈钢复合板|钛复合板|金属复合板|南钢集团安徽金元素复合材料有限公司-官网 | 折弯机-刨槽机-数控折弯机-数控刨槽机-数控折弯机厂家-深圳豐科机械有限公司 | 沈阳楼承板_彩钢板_压型钢板厂家-辽宁中盛绿建钢品股份有限公司 轴承振动测量仪电箱-轴承测振动仪器-测试仪厂家-杭州居易电气 | 硅胶制品-硅橡胶制品-东莞硅胶制品厂家-广东帝博科技有限公司 | 骁龙云呼电销防封号系统-axb电销平台-外呼稳定『免费试用』 | 洁净化验室净化工程_成都实验室装修设计施工_四川华锐净化公司 | 广州印刷厂_广州彩印厂-广州艺彩印务有限公司 | 石膏基自流平砂浆厂家-高强石膏基保温隔声自流平-轻质抹灰石膏粉砂浆批发-永康市汇利建设有限公司 | 远程会诊系统-手术示教系统【林之硕】医院远程医疗平台 | 北京开源多邦科技发展有限公司官网| 烽火安全网_加密软件、神盾软件官网 | 打包箱房_集成房屋-山东佳一集成房屋有限公司 | 艺术涂料|木纹漆施工|稻草漆厂家|马来漆|石桦奴|水泥漆|选加河南天工涂料 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 | 雄松华章(广州华章MBA)官网-专注MBA/MPA/MPAcc/MEM辅导培训 | 等离子表面处理机-等离子表面活化机-真空等离子清洗机-深圳市东信高科自动化设备有限公司 | 书信之家_书信标准模板范文大全| 聚氨酯复合板保温板厂家_廊坊华宇创新科技有限公司 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 咖啡加盟,咖啡店加盟连锁品牌-卡小逗| 除甲醛公司-甲醛检测-广西雅居环境科技有限公司 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 萃取箱-萃取槽-PVC萃取箱厂家-混合澄清槽- 杭州南方化工设备 | 「银杏树」银杏树行情价格_银杏树种植_山东程锦园林 | 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | 气象监测系统_气象传感器_微型气象仪_气象环境监测仪-山东风途物联网 | 熔体泵_熔体出料泵_高温熔体泵-郑州海科熔体泵有限公司 | 首页-浙江橙树网络技术有限公司| 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 连续油炸机,全自动油炸机,花生米油炸机-烟台茂源食品机械制造有限公司 |