前端總結·基礎篇·CSS（二）視覺

目錄

1、動畫（animation）(IE10+)（CSS3）
    1.1 定義動畫
    1.2 引用動畫
    1.3 多個動畫
    1.4 更多屬性
2、過渡（transition）（IE10+）（CSS3）
    2.1 定義首尾
    2.2 應用過渡
    2.3 多個過渡
    2.4 更多屬性
3、轉換（transform）（IE10+,-ms-,-webkit-,-moz-,-o-）（CSS3）
    3.1 2D轉換（-ms- for IE9）
    3.2 3D轉換（not opera）
4、圓角、陰影和透明的實踐（CSS3）
    4.1 圓角（border-radius）（IE9+）
    4.2 陰影（shadow）（box-shadow IE9+ text-shadow IE10+）
    4.3 透明度（opacity）
5、可縮寫屬性
    5.1 背景（background）
    5.2 字體（font）
    5.3 邊框（border）（border-image IE11+）
    5.4 填充和邊距（padding/margin）
6、濾鏡（filter）（notIE,-webkit-）
7、補充
    7.1 自定義鼠標指針（cursor）
    7.2 Canvas
    7.3 SVG
    7.4 WebGL

　　

1、動畫（animation）(IE10+,-webkit-,-moz,-o-)（CSS3）

動畫抵達的過程是連續的，還原的過程是突發的。放完了就還原，就是這麼任性。

1.1 定義動畫

定義動畫能夠用from-to的兩個定點形式，也可用百分比（0%、50%、100%）的多個定點形式。

/* 定義動畫 */ @keyframes toRight { from { left: 0px; top: 0px; background-color: red; } to { left: 130px; top: 0px; background-color: blue; } } 

1.2 引用動畫

咱們先定義一個div塊，class爲animation。而後對這個div塊引用動畫效果。

/* HTML部分 */ <div class="animation"></div> /* 定義div塊的默認樣式 */ .animation {  position: absolute;  width: 100px;  height: 100px; background-color: red; } /* 引用動畫 當鼠標懸於div塊上方時觸發動畫效果 */ .animation:hover {  animation: toRight 5s; } 

1.3 多個動畫

設置多個幀（@keyframes）,使用不一樣的名字。在引用動畫的時候不一樣的幀用逗號隔開。

animation: toRight 5s,toTop 5s; 

1.4 更多屬性

下面是一個完整的屬性應用和屬性說明。

 animation:walk 2s ease 1s 2 normal running forwards; animation-name:keyframename/none; animation-duration:time; animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic- bezier(n,n,n,n); animation-delay:time; animation-iteration-count:n/infinite; animation-direction:normal/alternate; animation-play-state:paused/running; animation-fill-mode:none/forwards/backwards/both; 

2、過渡（transition）(IE10+,-webkit-,-moz,-o-)（CSS3）

過渡一直是連續的，不管是抵達的過程，仍是還原的過程。

2.1 定義首尾

/* HTML */ <div class="transition"></div> /* 定義首 默認樣式 */ .transition {  width: 100px;  height: 100px; background-color: red; } /* 定義尾 目標樣式 */ .transition:hover {  width: 200px; } 

2.2 應用過渡

.transition { width: 100px; height: 100px; background-color: red; transition: width 2s; /* 只需添加這一條 */ } 

2.3 多個過渡

應用多個過渡的時候用逗號隔開，或者直接設置應用過渡效果的屬性爲all。

transition: width 5s,height 5s; 或 transition: all s; 

2.4 更多屬性

 transition:width 2s ease 1s; transition-property:none/all/property; transition-duration:time; transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic- bezier(n,n,n,n); transition-delay:time; 

3、轉換（transform）（IE10+,-ms-,-webkit-,-moz-,-o-）（CSS3）

3.1 2D轉換（-ms- for IE9）

如下沒有演示矩陣效果，更多請見張鑫旭。下圖的效果依次是縮放、旋轉、斜拉和移動，參數和下方的參數保持一致，展現的過程是用animation作的。

縮放 transform：scale(2,2); // 兩個參數分別是寬和高縮放的比例 旋轉 transform：rotate(180deg); 斜拉 transform：skew(30deg,30deg); 移動 transform：translate(50px,-50px); 矩陣 transform：matrix(n,n,n,n,n,n); // 3*3矩陣 6個參數 

3.2 3D轉換（not opera）

縮放：transform:scale(x,y)/scaleX(x)/scaleY(y)/scaleZ(z)/scale3d(x,y,z) 旋轉：transform:rotate(angle)/rotateX(angle)/rotateY(angle)/rotateZ(angle)/rotate3d(x,y,zangle) 斜拉：transform:skewX(angle)/skewY(angle)/skew(x-angle,y-angle) 移動：transform:translate(x,y)/translateX(x)/translateY(y)/translate3d(x,y,z) 透視：perspective(100) 默認單位是px，表示觀察者離物體的距離（-webkit-） 矩陣：transform:matrix3d(); 4*4矩陣 16個參數 其餘：transform:none; 屬性 transform-origin:x-axis/y-axis/z-axis; transform-style:flat/preserve-3d;（not IE） perspective:number/none; perspective-origin:x-axis/y-axis; backface-visibility:visibility/hidden; 

4、圓角、陰影和透明的實踐（CSS3）

4.1 圓角（border-radius）（IE9+）

下面是用過渡和圓角製做的一個按鈕。

/* HTML */ <a href="#" class="border-radius">HELLO</a> /* CSS */ .border-radius {  border: 1px solid red; border-radius: 10px 0 10px 0; // 設置圓角（四個值分別爲top-left、top-right、bottom-right和bottom-left）  width: 60px;  padding: 10px; text-align: center;  transition: all .3s ease-in-out; // 設置過渡效果 text-decoration: none; // 去除連接下劃線 } .border-radius:hover { background-color: red;  color: white; } 

4.2 陰影（shadow）（box-shadow IE9+ text-shadow IE10+）

給按鈕加上盒陰影和文本陰影。

/* HTML */ <a href="#" class="border-radius">HELLO</a> /* CSS */ .border-radius {  border: 1px solid red; border-radius: 10px 0 10px 0;  width: 60px;  padding: 10px; text-align: center;  transition: all .3s ease-in-out; text-decoration: none; } .border-radius:hover { background-color: red;  color: white; box-shadow: -10px -10px 5px gray; // 盒子陰影（四個值分別是x軸、y軸、模糊距離和顏色） text-shadow: -5px -5px 3px black; // 文本陰影 } 

4.3 透明度（opacity）

再加上透明度。默認透明度爲0.5，懸浮在按鈕上後變爲1.0.

/* HTML */ <a href="#" class="border-radius">HELLO</a> /* CSS */ .border-radius {  border: 1px solid red; border-radius: 10px 0 10px 0;  width: 60px;  padding: 10px; text-align: center;  transition: all .3s ease-in-out; text-decoration: none;  opacity: .5; // 設置默認透明度爲0.5 } .border-radius:hover { background-color: red;  color: white; box-shadow: -10px -10px 5px gray; text-shadow: -5px -5px 3px black;  opacity: 1; // 設置按鈕懸浮以後的透明度爲1 } /* 除了opacity，rgba一樣具備透明度屬性 */ 

5、可縮寫屬性

5.1 背景（background）

製做精靈圖（sprite）能夠用，而後將元素的width和height設置成小圖的大小。

 background:red url(laughcry.gif) repeat top left; background-color:color/transparent; background-image:url()/none/inherit; background-repeat:repeat/repeat-x/repeat-y/no-repeat/inherit; background-position:left top/center top/right top...; background-attachment:scroll/fixed/inherit; background-size:length/percentage/cover/contain; // cover爲覆蓋最小定位區域，contain爲最大 background-clip:border-box/padding-box/content-box; // 指定定位區域 background-origin:border-box/padding-box/content-box; // 指定繪畫區域 CSS3 多背景：（-image:url(bg.jpg),url(dog.jpg)）定位源（-origin:content-box/padding-box/border-box）顯示區域（-clip:content-box;）和尺寸（-size(80px 60px)） 

漸變（gradient）（IE10+,-webkit-,-o-,-moz-)（CSS3）

線性漸變（linear-gradient）

* background:linear-gradient(red,blue,green)
* 默認爲從上到下漸變，to right（前綴寫法中皆爲left）能夠設置從左到右漸變，to bottom right則對角線漸變（前綴寫法中webkit爲left top），180deg則能夠設置按照角度漸變； * background:linear-gradient(to right,red 10%,blue 50%,green 70%) * background:linear-gradient(rgba(220,220,220,0),rgba(220,220,220,1)) 

徑向漸變（radial-gradient）

* background:radial-gradient(red,blue,green) * 顏色值前面能夠設置形狀elipse/circle（橢圓/圓）默認爲elipse * background:radial-gradient(60% 55%,closest-side,red,blue,green) * 以上的參數還有farthest-side,closest-corner,farthest-corner, 

5.2 字體（font）

文字溢出時可使用word-break:break-all;進行字母級截斷，也可使用word-wrap:break-word;進行單詞級的截斷。

 font:italic bold 1.2em/1.2 Arial,sans-serif; font-style:normal/italic/oblique/inherit; font-weight:normal/bold/bolder/lighter/100...900 400爲normal 700爲bold/inherit; font-size:xx-small/x-small/small/medium/large/x-large/xx-large/smaller/larger/length/%/inherit; line-height:normal/number/length/%/inherit; font-family:family-name/generic-family; CSS3 @font-face用來設置自定義字體。留坑，之後再來好好總結一下。如下代碼直接粘貼自[菜鳥教程](http://www.runoob.com/try/try.php?filename=trycss3_font-face_rule)。 @font-face { font-family: myFirstFont;  src: url('Sansation_Light.ttf') ,url('Sansation_Light.eot'); /* IE9 */ } div { font-family:myFirstFont; } 

5.3 邊框（border）（border-image IE11+）

outline和border相似，可是不佔用佈局空間。

 border:1px solid red; // 值分別爲border-width、border-style和border-color border-style:none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset/inherit; CSS3 border-image:url() 30 30 stretch;（round爲邊框重複，stretch爲邊框拉伸） 

5.4 填充和邊距（padding/margin）

垂直方向的margin會合並，水平方向的不會。實際顯示的margin是二者中較大的那個。

padding:1px 2px 1px 2px;（top/right/bottom/left） 

6、濾鏡（filter）（notIE,-webkit-）

如下做爲參考手冊。

* 透明 filter:opacity(50%); * 陰影 filter:drop-shadow(10px 10px 5px red); * 模糊 filter:blur(5px); * 對比度 filter:contrast(200%); * 飽和度 filter:saturate(800%); * 灰度 filter:grayscale(100%); * 深褐色 filter:sepia(100%); * 亮度 filter:brightness(200%); * 色相旋轉 filter:hue-rotate(90deg); * 反轉輸入 filter:invert(100%); * 多值空格隔開 filter:filter:opacity(50%) blur(5px); 

7、補充

7.1 自定義鼠標指針（cursor）

cursor:pointer/help/wait/text/move/crosshair; 

7.2 Canvas

待到總結js的時候，再一併總結。

7.3 SVG

SVG全稱爲可縮放矢量圖像（Scalable Vector Graphics），參考教程有W3School和W3CPlus。成熟的庫有D3.js，經常使用來進行數據可視化。之後學習，留坑。

7.4 WebGL

WebGL全稱爲網頁圖像庫（Web Graphics Library）。成熟的庫有three.js，經常使用來基於web的3D製做。之後學習，留坑。

總結

本文主要參考W3School，部分來自《CSS設計指南》和日常遇到問題時的一些總結，少部分來自菜鳥教程。GIF製做工具使用的是ScreenToGif 1.4.2。

碼這篇文章碼了很久啊，部份內容因爲懶，就沒有完整的寫出來。

這是前端總結的第二篇文章，進度仍是挺慢的。大概過了5天，才更新到第二篇。那我都在幹啥呢？在總結JS啊。固然，只是作了大概的總結，並無寫成很詳細的文檔。所以，CSS基礎篇的文檔更新奇慢，接下來要作的事情就是提高更新的速度（保證質量的前提下）。Fighting。

 

文章來自：http://www.cnblogs.com/bergwhite/p/6440256.html