【CSS3初探之变形与动画】令人惊叹的CSS3

前言

这个标题比较狗血了，我一直知道CSS3可以做很多事情，但是我昨天看到一个人用CSS3华丽的画了一个太极八卦！

若是这个还可以接受，那么我今天就看见一个人用CSS3画了一个叮当猫！！！我突然就在想，你们究竟要闹哪样，实在太BT了！

我在想我最近几天是不是应该试试呢？虽然我CSS比较水了。。。

CSS3中的变形

在CSS3中，可以利用transform功能来实现文字或者图像的旋转、缩放、倾斜、移动这四种变形处理。

transform基础知识

在CSS3中，通过transform属性来达到功能需求，我们这里来看一个例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    div { width: 300px; margin: 150px auto; background-color: Yellow; text-align: center; -webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

我就喜欢这种怪怪的东西！！！

现在我们再来简单看看transform的其它功能：

transform缩放

使用scale方法来实现文字或者图像的缩放功能，在参数中定义倍率：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center; 
-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); }
    div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}
    
    </style>
</head>
<body>
<div>示例文字</div>
<div class="y">示例文字</div>
</body>
</html>

我们看到了缩放的威力了

倾斜

这个方法用来实现文字或者图片的倾斜，在参数中分别指定水平方向上的倾斜角度，垂直方向上的倾斜角度：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center; 
         -webkit-transform: skew(30deg, 30deg); -moz-transform: skew(30deg, 30deg); -o-transform: skew(30deg, 30deg); }
    div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}
    
    </style>
</head>
<body>
<div>示例文字</div>
<div class="y">示例文字</div>
</body>
</html>

移动

我们现在可以使用transform方法来使图片或者文字移动，在参数上分别指定水平、垂直的距离即可：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center; 
         -webkit-transform: transform(50px, 50px); -moz-transform: transform(50px, 50px); -o-transform: transform(50px, 50px); }
    div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}
    
    </style>
</head>
<body>
<div>示例文字</div>
<div class="y">示例文字</div>
</body>
</html>

这个功能我就感觉意义不大了。。。

总结

CSS3的这个功能提出来还是比较有意义的，比如我们的相册要实现旋转操作便简单多了，然后我们想实现模拟生活中放大镜等功能也会带来其他乐趣。

CSS3中的动画

在CSS3中，如果使用动画功能，可以使页面上的文字或者图像具有动画效果，可以使背景色从一种颜色平滑过渡到另一种颜色！！！非常不错的特性

CSS3中动画功能分为Transitions功能与Animation功能，他们都可以改变CSS中的属性来产生动画效果。

Transitisions支持元素由一种属性平滑过渡到另一个属性，Animations功能支持通过关键帧来指定在页面上产生更复杂的动画效果。

Transitions

transition属性使用方法如下：

transition: property duration timing-function
参数一表示要对哪个属性进行平滑过渡
参数二表示多长时间完成
参数三表示通过什么方法来平滑过渡

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .y {  background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center; 
         -webkit-transition: background-image 3s linear; -moz-transition: background-image 3s ulinear; -o-transition: background-image 3s linear; }
    .y:hover { background-image: url(2.jpg);}
    </style>
</head>
<body>
<div class="y">示例文字</div>
</body>
</html>

效果着实不差，但是很多浏览器不支持哟！

多个属性变形

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .y {  background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center; 
         -webkit-transition: background-image 1s linear, width 1s linear; -moz-transition: background-image 1s linear, width 1s linear; -o-transition: background-image 1s linear, width 1s linear; }
    .y:hover { background-image: url(2.jpg); width: 800px;}
    </style>
</head>
<body>
<div class="y">示例文字</div>
</body>
</html>

transition缺点：
transition功能实现的动画只能指定属性的开始值以及结束值，不能实现更加复杂的效果，但Animations就可以！

Animations

该功能与transition基本一致，只不过其控制力度更细而已.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .y {  background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center; }
    @-webkit-keyframes myImg 
    {
        40% { background-image: url(yexiaochai.jpg); }   
        100% { background-image: url(2.jpg); }   
    }
    .y:hover { -webkit-animation: myImg 3s linear; }
    </style>
</head>
<body>
<div class="y">示例文字</div>
</body>
</html>

我想说，他闪瞎了我的合金狗眼！！！

最后，让我们用以上功能实现一个我一直想要的功能：

实现网页淡入淡出

核心代码
     @-webkit-keyframes fadein 
        {
            0% { opacity: 0; }   
            100% { opacity: 1; }   
        }
        body {  -webkit-animation: fadein 3s linear 2; }

完整例子

  1 View Code 
  2  <!DOCTYPE html>
  3  <html xmlns="http://www.w3.org/1999/xhtml">
  4  <head>
  5      <title></title>
  6      <style type="text/css">
  7          body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
  8          h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
  9          html, body { background: none repeat scroll 0 0 #FFFFFF; color: #000000; }
 10          body { background-image: url("http://common.cnblogs.com/Skins/sea/images/back.gif"); font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
 11          p { line-height: 1.7;}
 12          a { text-decoration: none; color: #1A8BC8; }
 13          a:visited { color: #1A8BC8; }
 14          li { list-style: none; }
 15          img { border: none;}
 16          footer { text-align: center; color: Gray;}
 17          .c { clear: both;}
 18          .l-h-1 { line-height: 1;}
 19          .f-n { float: none;}
 20          .l { float : left;}
 21          .r { float: right;}
 22          
 23          
 24          .header { background: white url("http://common.cnblogs.com/Skins/sea/images/bg_header.jpg") no-repeat left top; height: 195px; border: 1px dotted #8B8D72; }
 25          .header hgroup{ margin: 50px 0 0 265px;  }
 26          .header h1 a{ font-size: 17px; font-weight: bold; text-decoration: none; color: Black;}
 27          
 28          .nav { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; border-top: none;}
 29          .nav ul{ padding: 5px 0 0 5px; }
 30          .nav li{ display: inline; padding: 5px 5px 0; }
 31          .nav aside { text-align: right; padding: 0 5px 5px;}
 32          
 33          .main { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; padding: 20px;}
 34          .main article header { margin-bottom: 10px; }
 35          .main article header h1{ font-size: 16px; font-weight: bold; }
 36          .main article header h1 a{ color: #1A8BC8; text-decoration: none; }
 37          .main article header h1 time, .main article header h1 span{ font-size: 12px; font-weight:  normal; float: right; }
 38          .main article section h2{ background: none repeat scroll 0 0 #2B6695; border-radius: 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; text-shadow: 2px 2px 3px #222222; }
 39          .main .book { margin: 10px; }
 40          .main .book header { border-bottom: 1px solid  #2B6695; }
 41          .main .book .author { font-weight: bold;}
 42          .main .book h3 { background: #2B6695; padding: 5px 20px; border-radius: 4px 4px 0 0; display: inline-block; margin-left: 20px; font-weight: bold; color: White; }
 43          
 44          .main .green_channel { border: 1px dotted #8B8D72; padding: 10px 10px ; margin: 10px 0 10px 0; width: 420px;}
 45          .main .green_channel a { margin: 0 2px; display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: bold; color: White; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D") repeat-x scroll 0 0 transparent;}
 46          .main .green_channel .green { background-color: #2DAEBF; }
 47          .main .green_channel .red { background-color: #E33100;}
 48          .main .green_channel .yellow { background-color: #FFB515;}
 49          .main .green_channel .gray { background-color: #EEEEEE; color: #555555;}
 50          .main .green_channel img { vertical-align: -7px;}
 51                  
 52          .main .author_info { display: inline-block; }
 53          .main .author_info .info_txt { display: inline-block; text-decoration: none; font-size: 12px; line-height: 1.5 }
 54          .main .digg { float: right;}
 55          .main .digg div { margin: 0 10px; display: inline-block; color: #075DB3; font-family: Verdana; font-size: 14px; text-align: center;}
 56          .main .digg div.f-n { float: none; display: block;color: gray; font-size: 12px;}
 57          .main .digg .top { background: url("http://static.cnblogs.com/images/upup.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}
 58          .main .digg .down { background: url("http://static.cnblogs.com/images/downdown.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}
 59         
 60          .aside { position: absolute; left: 20px; top: 105px; width: 220px; border: 1px dotted #8B8D72; background: white;}
 61          .aside .my_info { margin: 10px; line-height: 1.4;}
 62          .aside .side_bar { margin: 10px;}
 63          .aside .side_bar h3{ background: url("http://common.cnblogs.com/Skins/sea/images/bg_listtitle.gif") ; background-repeat: no-repeat; margin: 10px 0; font-weight: bold;}
 64          
 65          .comment { margin: 0 20px 20px 260px;}
 66          .comment h2 { padding: 5px 0;}
 67          .comment li { padding: 5px 15px; margin: 10px 0; border: 1px dotted #8B8D72; background: white; }
 68          .comment li a{ padding: 0 3px; }
 69          
 70          @-webkit-keyframes fadein 
 71         {
 72             0% { opacity: 0; }   
 73             100% { opacity: 1; }   
 74         }
 75         body {  -webkit-animation: fadein 3s linear 2; }
 76          
 77          
 78      </style>
 79  </head>
 80  <body>
 81      <header class="header">
 82          <hgroup>
 83              <h1>
 84                  <a href="http://www.cnblogs.com/yexiaochai/">叶小钗</a></h1>
 85              <h2>
 86                  两年内我会成为国内优秀的web前端工程师！2013-04-15</h2>
 87          </hgroup>
 88      </header>
 89      <nav class="nav">
 90          <ul>
 91              <li><a href="http://www.cnblogs.com/">博客园</a></li>
 92              <li><a href="http://www.cnblogs.com/yexiaochai/">首页</a></li>
 93              <li><a href="http://q.cnblogs.com">博问</a></li>
 94              <li><a href="http://home.cnblogs.com/ing/">闪存</a></li>
 95              <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx?opt=1">新随笔</a></li>
 96              <li><a href="http://space.cnblogs.com/msg/send/%e5%8f%b6%e5%b0%8f%e9%92%97">联系</a></li>
 97              <li><a href="http://www.cnblogs.com/yexiaochai/rss">订阅<img alt="订阅" src="http://images.cnblogs.com/xml.gif"></a></li>
 98              <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx">管理</a></li>
 99          </ul>
100          <!--不知道是否合理-->
101          <aside>
102                随笔-20  评论-260  文章-0  trackbacks-0 
103          </aside>
104      </nav>
105      <div class="main">
106          <article>
107              <header>
108                  <h1>
109                      <a href="#">HTML5书籍推荐</a><time pubdate="pubdate" value="2013-04-15">2013年4月15日</time><span>阅读(1363) 评论(24）</span></h1>
110              </header>
111              <p>
112                  HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些
113                  HTML5 技术。<br />
114                  HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。<br />
115                  它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft
116                  Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。<br />
117                  <b>作为前端开发人员你还未学习HTML5?</b>看来你已经OUT了，现在由老夫来推荐几本书籍：</p>
118              <section>
119                  <h2>
120                      书籍推荐</h2>
121                  <article class="book">
122                      <header>
123                          <h3>
124                              HTML5高级程序设计</h3>
125                      </header>
126                      <div class="author">
127                              （荷）柳伯斯，（美）阿伯斯，（美）萨姆 著</div>
128                      <p>
129                          本书首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理．从第2章起，分别围绕构建令人神往的富Web应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、Web
130                          Workers、Storage等API的使用，辅以直观明了的客户端和服务器端示例代码，让开发人员能够迅速理解和掌握新一代Web标准所涵盖的核心技术。本书最后探索了离线Web应用并展望了HTML5未来的发展前景。<br />
131                          本书面向有一定经验的Web应用开发人员，对HTML5及未来Web应用技术发展抱有浓厚兴趣的读者也可以学习参考。
132                      </p>
133                  </article>
134                  <article class="book">
135                      <header>
136                          <h3>
137                              HTML5&CSS3权威指南</h3>
138                      </header>
139                      <div class="author">
140                              陆凌牛</div>
141                      <p>
142                          如果你是一位有前瞻性的Web前端工作者，那么你一定会从《HTML5与CSS3权威指南》中受益，因为它就是专门为你打造的。《HTML 5与CSS 3权威指南》内容系统而全面，详尽地讲解了HTML
143                          5和CSS 3的所有新功能和新特性；技术新颖，所有知识点都紧跟HTML 5与CSS 3的最新发展动态（HTML 5和CSS 3仍在不断完善之中）；实战性强（包含246个示例页面），不仅每个知识点都配有精心设计的小案例（便于动手实践），而且还有两个综合性的案例（体现用HTML
144                          5与CSS 3开发Web应用的思维和方法）。《HTML5与CSS3权威指南》不仅能满足你全面而系统地学习理论知识的需求，还能满足你需要充分实践的需求。</p>
145                  </article>
146                  <article class="book">
147                      <header>
148                          <h3>
149                              Javascript高级程序设计</h3>
150                      </header>
151                      <div class="author">
152                              (美)(Nicholas C.Zakas)扎卡斯</div>
153                      <p>
154                          JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript
155                          标准。JavaScript是目前Web客户端开发的主要编程语言，也是Ajax的核心技术之一。
156                      </p>
157                  </article>
158              </section>
159              <footer>该文章属于叶小钗原创文章，欢迎转载，转载请注明出处</footer>
160          </article>
161          <div class="green_channel">
162              绿色通道： <a class="green" href="javascript:void(0);">好文要顶</a> <a href="javascript:void(0);"
163                  class="red">关注我</a> <a href="javascript:void(0);" class="yellow">收藏该文</a> <a target="_blank"
164                      href="#" class="gray">与我联系</a> <img alt="" src="http://static.cnblogs.com/images/icon_weibo_24.png">
165          </div>
166  
167          <div class="author_info">
168              <a target="_blank" href="http://home.cnblogs.com/u/yexiaochai/">
169                  <img alt="" class="author_avatar" src="http://pic.cnitblog.com/face/u294743.jpg?id=23185449"></a>
170              <div class="info_txt">
171                  <a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>
172                  <a href="http://home.cnblogs.com/u/yexiaochai/followees">关注 - 19</a><br>
173                  <a href="http://home.cnblogs.com/u/yexiaochai/followers">粉丝 - 130</a>
174              </div>
175              <div class="l-h-1">
176                  <a href="#">+加关注</a>
177              </div>
178              <div class="c"></div>
179          </div>
180          <div class="digg">
181              <div class="top">6</div>
182              <div class="down">0</div>
183              <div class="f-n">(请您对文章做出评价)</div>
184          </div>
185      </div>
186      <aside class="aside">
187          <div class="my_info">
188              昵称：<a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>
189              园龄：<a title="入园时间：2011-04-23" href="http://home.cnblogs.com/u/yexiaochai/">1年11个月</a><br>
190              粉丝：<a href="http://home.cnblogs.com/u/yexiaochai/followers/">130</a><br>
191              关注：<a href="http://home.cnblogs.com/u/yexiaochai/followees/">19</a><div id="p_b_follow">
192              </div>
193              <div id="p_b_ing">
194                  <a href="http://home.cnblogs.com/ing/my/">我的闪存</a></div>
195          </div>
196  
197          <div class="side_bar">
198              <h3>常用链接</h3>
199              <ul>
200                  <li><a href="http://www.cnblogs.com/yexiaochai/MyPosts.html" id="ctl01_rptMainLinks_lnkLinkItem_0">
201                      我的随笔</a></li>
202                  <li><a href="http://www.cnblogs.com/yexiaochai/MyComments.html" id="ctl01_rptMainLinks_lnkLinkItem_1">
203                      我的评论</a></li>
204                  <li><a href="http://www.cnblogs.com/yexiaochai/OtherPosts.html" title="我发表过评论的随笔"
205                      id="ctl01_rptMainLinks_lnkLinkItem_2">我的参与</a></li>
206                  <li><a href="http://www.cnblogs.com/yexiaochai/RecentComments.html" id="ctl01_rptMainLinks_lnkLinkItem_3">
207                      最新评论</a></li>
208                  <li><a href="http://www.cnblogs.com/yexiaochai/tag/" id="ctl01_rptMainLinks_lnkLinkItem_4">
209                      我的标签</a></li>
210              </ul>
211              <h3>随笔分类</h3>
212              <ul>
213                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471015.html"
214                      class="listitem" id="ctl04_CatList_LinkList_0_Link_0">css</a></li>
215                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471013.html"
216                      class="listitem" id="ctl04_CatList_LinkList_0_Link_1">HTML5&amp;CSS3初探</a></li>
217                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471016.html"
218                      class="listitem" id="ctl04_CatList_LinkList_0_Link_2">javascript</a></li>
219                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/309100.html"
220                      class="listitem" id="ctl04_CatList_LinkList_0_Link_3">Java学习(3)</a></li>
221                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326208.html"
222                      class="listitem" id="ctl04_CatList_LinkList_0_Link_4">Web前端(13)</a></li>
223                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/329149.html"
224                      class="listitem" id="ctl04_CatList_LinkList_0_Link_5">工作点滴(3)</a></li>
225                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326205.html"
226                      class="listitem" id="ctl04_CatList_LinkList_0_Link_6">设计模式</a></li>
227                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/306145.html"
228                      class="listitem" id="ctl04_CatList_LinkList_0_Link_7">学习感悟(3)</a></li>
229              </ul>
230               <h3>最近评论</h3>
231              <ul>
232                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658242">
233                      1. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
234                  <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658237">@</a>SmileCoder<br>
235                      你目标有点难哦</li>
236                  <li class="recent_comment_author">--叶小钗</li>
237                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658237">
238                      2. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
239                  <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658193">@</a>叶小钗<br>
240                      2年内我一定要成为国内优秀的NET软件工程师</li>
241                  <li class="recent_comment_author">--SmileCoder</li>
242                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658218">
243                      3. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
244                  <li class="recent_comment_body">真正要改变自己不是一件容易的事。</li>
245                  <li class="recent_comment_author">--izhangxu</li>
246                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658196">
247                      4. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
248                  <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658081">@</a>zuiaitianxibi<br>
249                      我一直认为这种题非常2.。。</li>
250                  <li class="recent_comment_author">--叶小钗</li>
251                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658193">
252                      5. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
253                  <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658180">@</a>赵弟栋<br>
254                      哪个是你妹。。。</li>
255                  <li class="recent_comment_author">--叶小钗</li>
256                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658180">
257                      6. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
258                  <li class="recent_comment_body">好久不见了 妹</li>
259                  <li class="recent_comment_author">--赵弟栋</li>
260                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658167">
261                      7. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
262                  <li class="recent_comment_body">加油吧！</li>
263                  <li class="recent_comment_author">--刘玲</li>
264                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658148">
265                      8. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
266                  <li class="recent_comment_body">好吧 支持一下</li>
267                  <li class="recent_comment_author">--clith</li>
268                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658144">
269                      9. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
270                  <li class="recent_comment_body"><a title="查看所回复的评论" href="#2658132">@</a>月漩涡<br>
271                      多谢道友</li>
272                  <li class="recent_comment_author">--叶小钗</li>
273                  <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658132">
274                      10. Re:两年内，我要成为国内优秀的前端技术人员！</a></li>
275                  <li class="recent_comment_body">送你一首<a target="_blank" href="http://bz.5sing.com/1790260.html">初心</a></li>
276                  <li class="recent_comment_author">--月漩涡</li>
277              </ul>
278          </div>
279  
280      </aside>
281  
282      <div class="comment">
283          <h2>
284              评论：</h2>
285          <ul>
286              <li><a href=""># 1楼</a>
287                  <time>2013-04-15 16:48</time>
288                  | <a href="">2013-04-15 16:48</a>
289                  <p>
290                      感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
291                  <div>
292                      <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
293                          删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
294                              class="r">支持(0)</a>
295                  </div>
296              </li>
297              <li><a href=""># 1楼</a>
298                  <time>2013-04-15 16:48</time>
299                  | <a href="">2013-04-15 16:48</a>
300                  <p>
301                      感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
302                  <div>
303                      <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
304                          删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
305                              class="r">支持(0)</a>
306                  </div>
307              </li>
308              <li><a href=""># 1楼</a>
309                  <time>2013-04-15 16:48</time>
310                  | <a href="">2013-04-15 16:48</a>
311                  <p>
312                      感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
313                  <div>
314                      <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
315                          删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
316                              class="r">支持(0)</a>
317                  </div>
318              </li>
319              <li><a href=""># 1楼</a>
320                  <time>2013-04-15 16:48</time>
321                  | <a href="">2013-04-15 16:48</a>
322                  <p>
323                      感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
324                  <div>
325                      <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
326                          删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
327                              class="r">支持(0)</a>
328                  </div>
329              </li>
330              <li><a href=""># 1楼</a>
331                  <time>2013-04-15 16:48</time>
332                  | <a href="">2013-04-15 16:48</a>
333                  <p>
334                      感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
335                  <div>
336                      <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
337                          删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
338                              class="r">支持(0)</a>
339                  </div>
340              </li>
341              <li><a href=""># 1楼</a>
342                  <time>2013-04-15 16:48</time>
343                  | <a href="">2013-04-15 16:48</a>
344                  <p>
345                      感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
346                  <div>
347                      <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
348                          删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
349                              class="r">支持(0)</a>
350                  </div>
351              </li>
352              <li><a href=""># 1楼</a>
353                  <time>2013-04-15 16:48</time>
354                  | <a href="">2013-04-15 16:48</a>
355                  <p>
356                      感觉浑身气爽啊，我也何尝不是有过此想法，其实舍去与舍去，需要改变的都是自己，而自己改变了，周围的一切也会随之改变，大道在于实践，希望你的实践能够帮助自己，祝你早日走上那一步了。</p>
357                  <div>
358                      <a href="javascript:void(0);">回复</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
359                          删除</a> <a class="r" href="javascript:void(0);">反对(0)</a> <a href="javascript:void(0);"
360                              class="r">支持(0)</a>
361                  </div>
362              </li>
363          </ul>
364      </div>
365  
366      <footer>版权所有·博客园</footer>
367  </body>
368  </html>

结语

这两章的知识点非常实用，特别是后面的动画效果，将会带来很好的用户体验！

当然用得好就是酷，用的不好就是花花绿绿很难看了，另外不知道性能问题怎么样了？

posted on 2013-04-27 11:49 叶小钗阅读(2476) 评论(9) 编辑收藏举报