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

 本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:
使用HTML5/CSS3快速制作便签贴特效
(注:图里的文字纯属杜撰,seo博客搞笑目的,如有雷同,纯属巧合,谢谢!)

 

工具/原料

  • html

步骤/方法

  1. 创建基本HTML和正方形

    首先添加基本的HTML结构以及构建基本的正方形,代码如下:                     使用HTML5/CSS3快速制作便签贴特效

    每个note都加一个href连接,主要是为了支持键盘访问,CSS代码如下:            使用HTML5/CSS3快速制作便签贴特效

    效果如下:

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

  2. 阴影和手写草体字

     

    这一步,是我们要实现正方形的阴影效果,并且将字体改为草体(仅限英文),由于google提供了Font API的支持,所以我们可以直接使用了,首先添加对Google API的调用:使用HTML5/CSS3快速制作便签贴特效

    然后设置引用这个字体:                                                     使用HTML5/CSS3快速制作便签贴特效

    关于阴影,由于各个浏览器还都不完全支持,所以需要分别处理,代码如下:       使用HTML5/CSS3快速制作便签贴特效

    效果如下:                                                                 使用HTML5/CSS3快速制作便签贴特效

  3.  第三步:倾斜正方形

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

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

    但是为了能让正方形随机倾斜,而不是全部都倾斜,我们需要使用新的CSS3选择器,让正方形在每2个倾斜4个deg,每3个倾斜负3个deg,每5个倾斜5个deg               使用HTML5/CSS3快速制作便签贴特效

    效果如下                                                                   使用HTML5/CSS3快速制作便签贴特效

  4. 平滑过渡和添加颜色

    第四步的特效,看起来有些生硬,我们可以添加Transition来达到平滑动画的效果,另外颜色比较单一,我们可以设置一下不同的颜色,首先在ul->li->a里添加Transition

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

    然后在even和3n里定义不同的颜色:                                           使用HTML5/CSS3快速制作便签贴特效

    这样,就完成了我们最终的效果:                                             使用HTML5/CSS3快速制作便签贴特效

    A+
发布日期:2012年02月08日  所属分类:网站建设

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

  1. 上海甲亢医院 3

    确实是这样的啊。我晕啊。你怎么这么有才呢?我要向你学啊。