html5實現的便條特效(實戰分享)_html5教學技巧-H5教程-PHP中文網

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

WBOY

發布： 2016-05-16 15:48:29

原創

2017 人瀏覽過

複製程式碼

程式碼如下:

>
便條;

*{
邊距: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 ;
}
風格>
;
頭>