html5便签记事本前端开辟案例讲授应用HTML5/CSS3制造便签贴特效

末了做出来的效果如下：

便签贴

第一步：创建基本HTML和正方形

首先添加基本的HTML构造以及构建基本的正方形，代码如下：

html5便签记事本前端开辟案例讲授应用HTML5/CSS3制造便签贴特效 NoSQL

<ul> <li> <a href=\"大众#\"大众> <h2>鹅是程序员：</h2> <p>大家好好，我是程序员，感激大家关注，Think You!</p> </a> </li> <li> <a href=\"大众#\公众> <h2>Tom：</h2> <p>最近女朋友离开我了？very poor!</p> </a> </li> <li> <a href=\公众#\公众> <h2>技能小白：</h2> <p>c#入门编程这本书快要学完了，加油! Come on!</p> </a> </li> <li> <a href=\"大众#\"大众> <h2>Vicky：</h2> <p>这个月的人为少得可怜，穷呀！
</p> </a> </li> <li> <a href=\公众#\"大众> <h2>动漫迷：</h2> <p>漫威的电影太好看了，very Good!</p> </a> </li> <li> <a href=\"大众#\公众> <h2>皮碗：</h2> <p>佘莉莉，还记得我吗？miss you，哈哈，童年回顾</p> </a> </li> </ul>

对应的CSS代码如下：

{ margin: 0; padding: 0; } body { font-family: arial,sans-serif; font-size: 100%; margin: 3em; background: #999; 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; }

效果如下：

第二步：阴影和艺术字体

这一步，是我们要实现正方形的阴影效果，并且将字体改为草体（仅限英文），由于google供应了Font API的支持，以是我们可以直策应用了，首先添加对Google API的调用：

然后设置引用Reenie Beanie字体，Reenie Beanie字体是一款用于艺术设计方面的字体，只对英文有效。

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 / box-shadow: 5px 5px 7px rgba(33,33,33,.7); }

效果如下：

第三步：旋转正方形

为了让正方形旋转，我们添加如下代码让正方形旋转负6度：

ul li a{ transform:rotate(-6deg); }

效果如下：

现在全部都倾斜，我们须要利用新的CSS3选择器，让正方形在每2个旋转4个deg，第2个旋转5个deg,，第3个旋转负-20个deg,，第4个旋转负16个deg,第5个旋转-12个deg：

/偶数正方形/ ul li:nth-child(even) a { transform: rotate(4deg); } /第二个正方形/ ul li:nth-child(2) a { transform: rotate(5deg); } /第三个正方形/ ul li:nth-child(3) a { transform: rotate(-20deg); } /第四个正方形/ ul li:nth-child(4) a { transform: rotate(16deg); } /第五个正方形/ ul li:nth-child(5) a { transform: rotate(-12deg); }

效果如下：

第四步：添加渐变颜色

第四步的效果，看起来有些单调，我们可以设置背景色，css如下

ul li:nth-child(even) a { background: linear-gradient(#ee35f6, #cfc); } ul li:nth-child(3n) a { background: linear-gradient(#cfc, #ccf); }

效果如下：

第五步：Hover和Focus时放缩正方形

想在hover和focus的时候达到放大的效果，添加如下代码：

ul li a:hover, ul li a:focus {

box-shadow: 10px 10px 7px rgba(0,0,0,.7);

transform: scale(1.25);

position: relative;

z-index: 5;