使用HTML5/CSS3快速制作便签贴特效页面-技术开发专区

最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!

使用HTML5/CSS3快速制作便签贴特效页面

作者：汤姆大叔编辑：苏巧红 2011-12-15 13:44 来源：博客

　　三、倾斜正方形

　　为了让正方形倾斜，我们需要在li->a里添加如下代码：

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

　　但是为了能让正方形随机倾斜，而不是全部都倾斜，我们需要使用新的CSS3选择器，让正方形在每2个倾斜4个deg，每3个倾斜负3个deg,每5个倾斜5个deg：

    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;
      }

　　效果如下：

倾斜正方形

第1页：HTML5/CSS:创建基本HTML和正方形第2页：HTML5/CSS:阴影和手写草体字第3页：HTML5/CSS:倾斜正方形代码实现第4页：在Hover和Focus时放缩正方形第5页：HTML5/CSS:平滑过渡和添加颜色

关注我们

Dudu：

使用HTML5/CSS3快速制作便签贴特效页面