html5實現的便條特效(實戰分享)_html5教學技巧

複製程式碼

程式碼如下:

>
;

*{
邊距:0;
填充：0；
}
正文{
字體系列：arial、sans-serif；
字體大小：100%;
保證金：3em；
背景：#666 ;
顏色：#fff ;
}
h2,p{
字體大小:100%;
字體粗細：正常；
}
ul,li{
列表樣式：無；
}
ul{
溢出：隱藏；
填充：3em;
}
ul li a{
文字裝飾：無；
顏色
顏色
顏色：#000 ;
背景：#ffc ;
顯示：塊；
高度：10em;
寬度：10em;
填充：1em；
}
ul li{
保證金：1em;
浮動：左；
}
ul li h2
{
字體大小：140%；
字體粗細：粗體；
底部填充：10px;
}
ul li p
{
font-family: “Reenie Beanie”,arial,sans-serif,微軟雅黑;
字體大小：110%；
}
ul li a
{
文字裝飾：無；
顏色：#000;
背景：#ffc;
顯示：塊；
高度：10em ;
寬度：10em;
填充：1em; /* 火狐*/
-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,.73,33,.73,33,.73,33,.73,33,.73,33,.73,33,.73,33,.73,33,.73,33,.7 ) ;
}
ul li a{
-webkit-transform:rotate(-6deg);
-o-transform:旋轉(-6deg);
-moz-transform:旋轉(-6deg);
}
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:旋轉(4deg);
-moz-transform:旋轉(4deg);
位置：親屬；
頂部：5px;
}
ul li:nth-child(3n) a{
-o- transform:rotate(-3deg);
-webkit-transform:旋轉(-3deg);
-moz-transform:旋轉(-3deg);
位置：親屬；
頂部：-5px ;
}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg);
-webkit-transform:旋轉(5deg);
-moz -transform:旋轉(5deg);
位置：親屬；
頂部：-10px;
}
ul li a:懸停,ul li a:焦點{
-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：比例（1.25）；
-moz-transform：比例（1.25）；
-o-transform: 比例(1.25);
位置：親屬；
z-index:5;
}
ul li:nth-child(even) a{
-o-transform:rotate(4deg) ;
-webkit-transform:旋轉(4deg);
-moz-transform:旋轉(4deg);
位置：親屬；
頂部：5px；
背景：#cfc ;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:旋轉(-3deg);
-moz -transform:旋轉(-3deg);
位置：親屬；
上：-5px;
背景：#ccf ;
}
風格>
;
頭>

;

• 
  

  嘟嘟：

  
  

  最近咋沒美女發文呢？我一定給頭條推薦，推薦！推薦！

  
  


• 
  

  湯姆大叔：

  
  

  團隊的有個成員離開了微軟做SDE3，又得僱用新成員了

  
  


• 
  

  技術弟弟：

  
  

  O2DS跟我翻譯的書一樣，我肯定他翻得快，晚上加班翻，快！快速地！快！

  
  


• 
  

  Artech：

  
  

  WCF的帖子真是少，看來我畢業發點貼文讓大家學習呢

  
  


• 
  

  吉日嘎拉：

  
  

  將權限管理、工作流程管理做到我能力的極限，一個人只能完成那麼少幾件事

  
  li>
  

• 某武林高手：

  低於25000塊的面試再也不去了，它grandma的