當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發(fā)布時(shí)間：2025/4/5 CSS 60 豆豆

生活随笔收集整理的這篇文章主要介紹了【CSS3初探之变形与动画】令人惊叹的CSS3 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

這個(gè)標(biāo)題比較狗血了，我一直知道CSS3可以做很多事情，但是我昨天看到一個(gè)人用CSS3華麗的畫了一個(gè)太極八卦！

若是這個(gè)還可以接受，那么我今天就看見一個(gè)人用CSS3畫了一個(gè)叮當(dāng)貓！！！我突然就在想，你們究竟要鬧哪樣，實(shí)在太BT了！

我在想我最近幾天是不是應(yīng)該試試呢？雖然我CSS比較水了。。。

CSS3中的變形

在CSS3中，可以利用transform功能來實(shí)現(xiàn)文字或者圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四種變形處理。

transform基礎(chǔ)知識(shí)

在CSS3中，通過transform屬性來達(dá)到功能需求，我們這里來看一個(gè)例子：

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

我就喜歡這種怪怪的東西！！！

現(xiàn)在我們再來簡單看看transform的其它功能：

transform縮放

使用scale方法來實(shí)現(xiàn)文字或者圖像的縮放功能，在參數(shù)中定義倍率：

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

我們看到了縮放的威力了

傾斜

這個(gè)方法用來實(shí)現(xiàn)文字或者圖片的傾斜，在參數(shù)中分別指定水平方向上的傾斜角度，垂直方向上的傾斜角度：

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

移動(dòng)

我們現(xiàn)在可以使用transform方法來使圖片或者文字移動(dòng)，在參數(shù)上分別指定水平、垂直的距離即可：

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

這個(gè)功能我就感覺意義不大了。。。

總結(jié)

CSS3的這個(gè)功能提出來還是比較有意義的，比如我們的相冊要實(shí)現(xiàn)旋轉(zhuǎn)操作便簡單多了，然后我們想實(shí)現(xiàn)模擬生活中放大鏡等功能也會(huì)帶來其他樂趣。

CSS3中的動(dòng)畫

在CSS3中，如果使用動(dòng)畫功能，可以使頁面上的文字或者圖像具有動(dòng)畫效果，可以使背景色從一種顏色平滑過渡到另一種顏色！！！非常不錯(cuò)的特性

CSS3中動(dòng)畫功能分為Transitions功能與Animation功能，他們都可以改變CSS中的屬性來產(chǎn)生動(dòng)畫效果。

Transitisions支持元素由一種屬性平滑過渡到另一個(gè)屬性，Animations功能支持通過關(guān)鍵幀來指定在頁面上產(chǎn)生更復(fù)雜的動(dòng)畫效果。

Transitions

transition屬性使用方法如下：

transition: property duration timing-function 參數(shù)一表示要對哪個(gè)屬性進(jìn)行平滑過渡參數(shù)二表示多長時(shí)間完成參數(shù)三表示通過什么方法來平滑過渡 <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>

效果著實(shí)不差，但是很多瀏覽器不支持喲！

多個(gè)屬性變形 <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缺點(diǎn)：
transition功能實(shí)現(xiàn)的動(dòng)畫只能指定屬性的開始值以及結(jié)束值，不能實(shí)現(xiàn)更加復(fù)雜的效果，但Animations就可以！

Animations

該功能與transition基本一致，只不過其控制力度更細(xì)而已.

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

我想說，他閃瞎了我的合金狗眼！！！

最后，讓我們用以上功能實(shí)現(xiàn)一個(gè)我一直想要的功能：

實(shí)現(xiàn)網(wǎng)頁淡入淡出

核心代碼@-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 兩年內(nèi)我會(huì)成為國內(nèi)優(yōu)秀的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">聯(lián)系</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 標(biāo)準(zhǔn)的 HTML 標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些 113 HTML5 技術(shù)。<br /> 114 HTML 5有兩大特點(diǎn)：首先，強(qiáng)化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫等 Web 應(yīng)用的功能。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。<br /> 115 它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft 116 Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。<br /> 117 <b>作為前端開發(fā)人員你還未學(xué)習(xí)HTML5?</b>看來你已經(jīng)OUT了，現(xiàn)在由老夫來推薦幾本書籍：</p> 118 <section> 119 <h2> 120 書籍推薦</h2> 121 <article class="book"> 122 <header> 123 <h3> 124 HTML5高級程序設(shè)計(jì)</h3> 125 </header> 126 <div class="author"> 127 （荷）柳伯斯，（美）阿伯斯，（美）薩姆著</div> 128 <p> 129 本書首先介紹了HTML5的歷史背景、新的語義標(biāo)簽及與以往HTML版本相比的根本變化，同時(shí)揭示了HTML5背后的設(shè)計(jì)原理．從第2章起，分別圍繞構(gòu)建令人神往的富Web應(yīng)用，逐一討論了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、Web 130 Workers、Storage等API的使用，輔以直觀明了的客戶端和服務(wù)器端示例代碼，讓開發(fā)人員能夠迅速理解和掌握新一代Web標(biāo)準(zhǔn)所涵蓋的核心技術(shù)。本書最后探索了離線Web應(yīng)用并展望了HTML5未來的發(fā)展前景。<br /> 131 本書面向有一定經(jīng)驗(yàn)的Web應(yīng)用開發(fā)人員，對HTML5及未來Web應(yīng)用技術(shù)發(fā)展抱有濃厚興趣的讀者也可以學(xué)習(xí)參考。 132 </p> 133 </article> 134 <article class="book"> 135 <header> 136 <h3> 137 HTML5&CSS3權(quán)威指南</h3> 138 </header> 139 <div class="author"> 140 陸凌牛</div> 141 <p> 142 如果你是一位有前瞻性的Web前端工作者，那么你一定會(huì)從《HTML5與CSS3權(quán)威指南》中受益，因?yàn)樗褪菍ｉT為你打造的。《HTML 5與CSS 3權(quán)威指南》內(nèi)容系統(tǒng)而全面，詳盡地講解了HTML 143 5和CSS 3的所有新功能和新特性；技術(shù)新穎，所有知識(shí)點(diǎn)都緊跟HTML 5與CSS 3的最新發(fā)展動(dòng)態(tài)（HTML 5和CSS 3仍在不斷完善之中）；實(shí)戰(zhàn)性強(qiáng)（包含246個(gè)示例頁面），不僅每個(gè)知識(shí)點(diǎn)都配有精心設(shè)計(jì)的小案例（便于動(dòng)手實(shí)踐），而且還有兩個(gè)綜合性的案例（體現(xiàn)用HTML 144 5與CSS 3開發(fā)Web應(yīng)用的思維和方法）。《HTML5與CSS3權(quán)威指南》不僅能滿足你全面而系統(tǒng)地學(xué)習(xí)理論知識(shí)的需求，還能滿足你需要充分實(shí)踐的需求。</p> 145 </article> 146 <article class="book"> 147 <header> 148 <h3> 149 Javascript高級程序設(shè)計(jì)</h3> 150 </header> 151 <div class="author"> 152 (美)(Nicholas C.Zakas)扎卡斯</div> 153 <p> 154 JavaScript 是根據(jù) "ECMAScript"標(biāo)準(zhǔn)制定的網(wǎng)頁腳本語言。這個(gè)標(biāo)準(zhǔn)由 ECMA 組織發(fā)展和維護(hù)。ECMA-262 是正式的 JavaScript 155 標(biāo)準(zhǔn)。JavaScript是目前Web客戶端開發(fā)的主要編程語言，也是Ajax的核心技術(shù)之一。 156 </p> 157 </article> 158 </section> 159 <footer>該文章屬于葉小釵原創(chuàng)文章，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處</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">關(guān)注我</a> <a href="javascript:void(0);" class="yellow">收藏該文</a> <a target="_blank" 164 href="#" class="gray">與我聯(lián)系</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">關(guān)注 - 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="#">+加關(guān)注</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">(請您對文章做出評價(jià))</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="入園時(shí)間：2011-04-23" href="http://home.cnblogs.com/u/yexiaochai/">1年11個(gè)月</a><br> 190 粉絲：<a href="http://home.cnblogs.com/u/yexiaochai/followers/">130</a><br> 191 關(guān)注：<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="我發(fā)表過評論的隨筆" 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 我的標(biāo)簽</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&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學(xué)習(xí)(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">工作點(diǎn)滴(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">設(shè)計(jì)模式</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">學(xué)習(xí)感悟(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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</a></li> 234 <li class="recent_comment_body"><a title="查看所回復(fù)的評論" href="#2658237">@</a>SmileCoder<br> 235 你目標(biāo)有點(diǎn)難哦</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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</a></li> 239 <li class="recent_comment_body"><a title="查看所回復(fù)的評論" href="#2658193">@</a>葉小釵<br> 240 2年內(nèi)我一定要成為國內(nèi)優(yōu)秀的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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</a></li> 248 <li class="recent_comment_body"><a title="查看所回復(fù)的評論" href="#2658081">@</a>zuiaitianxibi<br> 249 我一直認(rèn)為這種題非常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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</a></li> 253 <li class="recent_comment_body"><a title="查看所回復(fù)的評論" href="#2658180">@</a>趙弟棟<br> 254 哪個(gè)是你妹。。。</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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</a></li> 270 <li class="recent_comment_body"><a title="查看所回復(fù)的評論" 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:兩年內(nèi)，我要成為國內(nèi)優(yōu)秀的前端技術(shù)人員！</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 感覺渾身氣爽啊，我也何嘗不是有過此想法，其實(shí)舍去與舍去，需要改變的都是自己，而自己改變了，周圍的一切也會(huì)隨之改變，大道在于實(shí)踐，希望你的實(shí)踐能夠幫助自己，祝你早日走上那一步了。</p> 291 <div> 292 <a href="javascript:void(0);">回復(fù)</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 感覺渾身氣爽啊，我也何嘗不是有過此想法，其實(shí)舍去與舍去，需要改變的都是自己，而自己改變了，周圍的一切也會(huì)隨之改變，大道在于實(shí)踐，希望你的實(shí)踐能夠幫助自己，祝你早日走上那一步了。</p> 302 <div> 303 <a href="javascript:void(0);">回復(fù)</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 感覺渾身氣爽啊，我也何嘗不是有過此想法，其實(shí)舍去與舍去，需要改變的都是自己，而自己改變了，周圍的一切也會(huì)隨之改變，大道在于實(shí)踐，希望你的實(shí)踐能夠幫助自己，祝你早日走上那一步了。</p> 313 <div> 314 <a href="javascript:void(0);">回復(fù)</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 感覺渾身氣爽啊，我也何嘗不是有過此想法，其實(shí)舍去與舍去，需要改變的都是自己，而自己改變了，周圍的一切也會(huì)隨之改變，大道在于實(shí)踐，希望你的實(shí)踐能夠幫助自己，祝你早日走上那一步了。</p> 324 <div> 325 <a href="javascript:void(0);">回復(fù)</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 感覺渾身氣爽啊，我也何嘗不是有過此想法，其實(shí)舍去與舍去，需要改變的都是自己，而自己改變了，周圍的一切也會(huì)隨之改變，大道在于實(shí)踐，希望你的實(shí)踐能夠幫助自己，祝你早日走上那一步了。</p> 335 <div> 336 <a href="javascript:void(0);">回復(fù)</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 感覺渾身氣爽啊，我也何嘗不是有過此想法，其實(shí)舍去與舍去，需要改變的都是自己，而自己改變了，周圍的一切也會(huì)隨之改變，大道在于實(shí)踐，希望你的實(shí)踐能夠幫助自己，祝你早日走上那一步了。</p> 346 <div> 347 <a href="javascript:void(0);">回復(fù)</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 感覺渾身氣爽啊，我也何嘗不是有過此想法，其實(shí)舍去與舍去，需要改變的都是自己，而自己改變了，周圍的一切也會(huì)隨之改變，大道在于實(shí)踐，希望你的實(shí)踐能夠幫助自己，祝你早日走上那一步了。</p> 357 <div> 358 <a href="javascript:void(0);">回復(fù)</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>版權(quán)所有·博客園</footer> 367 </body> 368 </html>

結(jié)語

這兩章的知識(shí)點(diǎn)非常實(shí)用，特別是后面的動(dòng)畫效果，將會(huì)帶來很好的用戶體驗(yàn)！

當(dāng)然用得好就是酷，用的不好就是花花綠綠很難看了，另外不知道性能問題怎么樣了？

轉(zhuǎn)載于:https://www.cnblogs.com/yexiaochai/archive/2013/04/27/3046687.html

總結(jié)

以上是生活随笔為你收集整理的【CSS3初探之变形与动画】令人惊叹的CSS3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

动画