前端總結(jié)系列

• 前端總結(jié)·基礎(chǔ)篇·CSS（一）布局
• 前端總結(jié)·基礎(chǔ)篇·CSS（二）視覺(jué)
• 前端總結(jié)·基礎(chǔ)篇·CSS（三）補(bǔ)充
• 前端總結(jié)·基礎(chǔ)篇·JS（一）原型、原型鏈、構(gòu)造函數(shù)和字符串（String）
• 前端總結(jié)·基礎(chǔ)篇·JS（二）數(shù)組深拷貝、去重以及字符串反序和數(shù)組（Array）
• 前端總結(jié)·基礎(chǔ)篇·JS（三）arguments、callee、call、apply、bind及函數(shù)封裝和構(gòu)造函數(shù)
• 前端總結(jié)·基礎(chǔ)篇·JS（四）異步請(qǐng)求及跨域方案
• 前端總結(jié)·工具篇·管理（一）常用模塊化方案

目錄

一、動(dòng)畫(huà)（animation）(IE10 )（CSS3）1.1 定義動(dòng)畫(huà)1.2 引用動(dòng)畫(huà)1.3 多個(gè)動(dòng)畫(huà)1.4 更多屬性 二、過(guò)渡（transition）（IE10 ）（CSS3）2.1 定義首尾2.2 應(yīng)用過(guò)渡2.3 多個(gè)過(guò)渡2.4 更多屬性 三、轉(zhuǎn)換（transform）（IE10 ,-ms-,-webkit-,-moz-,-o-）（CSS3）3.1 2D轉(zhuǎn)換（-ms- for IE9）3.2 3D轉(zhuǎn)換（not opera） 四、圓角、陰影和透明的實(shí)踐（CSS3）4.1 圓角（border-radius）（IE9 ）4.2 陰影（shadow）（box-shadow IE9 text-shadow IE10 ）4.3 透明度（opacity） 五、可縮寫(xiě)屬性5.1 背景（background）5.2 字體（font）5.3 邊框（border）（border-image IE11 ）5.4 填充和邊距（padding/margin） 六、濾鏡（filter）（notIE,-webkit-） 七、補(bǔ)充7.1 自定義鼠標(biāo)指針（cursor）7.2 Canvas7.3 SVG7.4 WebGL

一、動(dòng)畫(huà)（animation）(IE10 ,-webkit-,-moz,-o-)（CSS3）

動(dòng)畫(huà)抵達(dá)的過(guò)程是連續(xù)的，還原的過(guò)程是突發(fā)的。放完了就還原，就是這么任性。

1.1 定義動(dòng)畫(huà)

定義動(dòng)畫(huà)可以用from-to的兩個(gè)定點(diǎn)形式，也可用百分比（0%、50%、100%）的多個(gè)定點(diǎn)形式。

/* 定義動(dòng)畫(huà) */@keyframes toRight {from {left: 0px;top: 0px;background-color: red;}to {left: 130px;top: 0px;background-color: blue;} }

1.2 引用動(dòng)畫(huà)

我們先定義一個(gè)div塊，class為animation。然后對(duì)這個(gè)div塊引用動(dòng)畫(huà)效果。

/* HTML部分 */<div class="animation"></div>/* 定義div塊的默認(rèn)樣式 */.animation {position: absolute;width: 100px;height: 100px;background-color: red; }/* 引用動(dòng)畫(huà) 當(dāng)鼠標(biāo)懸于div塊上方時(shí)觸發(fā)動(dòng)畫(huà)效果 */.animation:hover {animation: toRight 5s; }

1.3 多個(gè)動(dòng)畫(huà)

設(shè)置多個(gè)幀（@keyframes）,使用不同的名字。在引用動(dòng)畫(huà)的時(shí)候不同的幀用逗號(hào)隔開(kāi)。

animation: toRight 5s,toTop 5s;

1.4 更多屬性

下面是一個(gè)完整的屬性應(yīng)用和屬性說(shuō)明。

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;

二、過(guò)渡（transition）(IE10 ,-webkit-,-moz,-o-)（CSS3）

過(guò)渡一直是連續(xù)的，無(wú)論是抵達(dá)的過(guò)程，還是還原的過(guò)程。

2.1 定義首尾

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

2.2 應(yīng)用過(guò)渡

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

2.3 多個(gè)過(guò)渡

應(yīng)用多個(gè)過(guò)渡的時(shí)候用逗號(hào)隔開(kāi)，或者直接設(shè)置應(yīng)用過(guò)渡效果的屬性為all。

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

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;

三、轉(zhuǎn)換（transform）（IE10 ,-ms-,-webkit-,-moz-,-o-）（CSS3）

3.1 2D轉(zhuǎn)換（-ms- for IE9）

以下沒(méi)有演示矩陣效果，更多請(qǐng)見(jiàn)張?chǎng)涡瘛Ｏ聢D的效果依次是縮放、旋轉(zhuǎn)、斜拉和移動(dòng)，參數(shù)和下方的參數(shù)保持一致，展示的過(guò)程是用animation做的。

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

3.2 3D轉(zhuǎn)換（not opera）

縮放：transform:scale(x,y)/scaleX(x)/scaleY(y)/scaleZ(z)/scale3d(x,y,z) 旋轉(zhuǎn)：transform:rotate(angle)/rotateX(angle)/rotateY(angle)/rotateZ(angle)/rotate3d(x,y,zangle) 斜拉：transform:skewX(angle)/skewY(angle)/skew(x-angle,y-angle) 移動(dòng)：transform:translate(x,y)/translateX(x)/translateY(y)/translate3d(x,y,z) 透視：perspective(100) 默認(rèn)單位是px，表示觀(guān)察者離物體的距離（-webkit-） 矩陣：transform:matrix3d(); 4*4矩陣 16個(gè)參數(shù) 其他：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;

四、圓角、陰影和透明的實(shí)踐（CSS3）

4.1 圓角（border-radius）（IE9 ）

下面是用過(guò)渡和圓角制作的一個(gè)按鈕。

/* HTML */<a href="#" class="border-radius">HELLO</a>/* CSS */.border-radius {border: 1px solid red;border-radius: 10px 0 10px 0; // 設(shè)置圓角（四個(gè)值分別為top-left、top-right、bottom-right和bottom-left）width: 60px;padding: 10px;text-align: center;transition: all .3s ease-in-out; // 設(shè)置過(guò)渡效果text-decoration: none; // 去除鏈接下劃線(xiàn) } .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; // 盒子陰影（四個(gè)值分別是x軸、y軸、模糊距離和顏色）text-shadow: -5px -5px 3px black; // 文本陰影 }

4.3 透明度（opacity）

再加上透明度。默認(rèn)透明度為0.5，懸浮在按鈕上后變?yōu)?.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; // 設(shè)置默認(rèn)透明度為0.5 } .border-radius:hover {background-color: red;color: white;box-shadow: -10px -10px 5px gray;text-shadow: -5px -5px 3px black;opacity: 1; // 設(shè)置按鈕懸浮之后的透明度為1 }/* 除了opacity，rgba同樣具有透明度屬性 */

五、可縮寫(xiě)屬性

5.1 背景（background）

制作精靈圖（sprite）可以用background-color:url() -20px -20px;，然后將元素的width和height設(shè)置成小圖的大小。

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為覆蓋最小定位區(qū)域，contain為最大 background-clip:border-box/padding-box/content-box; // 指定定位區(qū)域 background-origin:border-box/padding-box/content-box; // 指定繪畫(huà)區(qū)域CSS3多背景：（-image:url(bg.jpg),url(dog.jpg)）定位源（-origin:content-box/padding-box/border-box）顯示區(qū)域（-clip:content-box;）和尺寸（-size(80px 60px)）

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

線(xiàn)性漸變（linear-gradient）

* background:linear-gradient(red,blue,green) * 默認(rèn)為從上到下漸變，to right（前綴寫(xiě)法中皆為left）可以設(shè)置從左到右漸變，to bottom right則對(duì)角線(xiàn)漸變（前綴寫(xiě)法中webkit為left top），180deg則可以設(shè)置按照角度漸變； * 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) * 顏色值前面可以設(shè)置形狀elipse/circle（橢圓/圓）默認(rèn)為elipse * background:radial-gradient(60% 55%,closest-side,red,blue,green) * 以上的參數(shù)還有farthest-side,closest-corner,farthest-corner,

5.2 字體（font）

文字溢出時(shí)可以使用word-break:break-all;進(jìn)行字母級(jí)截?cái)?#xff0c;也可以使用word-wrap:break-word;進(jìn)行單詞級(jí)的截?cái)唷?/p> 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用來(lái)設(shè)置自定義字體。留坑，以后再來(lái)好好總結(jié)一下。以下代碼直接粘貼自[菜鳥(niǎo)教程](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類(lèi)似，但是不占用布局空間。

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

5.4 填充和邊距（padding/margin）

垂直方向的margin會(huì)合并，水平方向的不會(huì)。實(shí)際顯示的margin是兩者中較大的那個(gè)。

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

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

以下作為參考手冊(cè)。

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

七、補(bǔ)充

7.1 自定義鼠標(biāo)指針（cursor）

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

7.2 Canvas

待到總結(jié)js的時(shí)候，再一并總結(jié)。

7.3 SVG

SVG全稱(chēng)為可縮放矢量圖像（Scalable Vector Graphics），參考教程有W3School和W3CPlus。成熟的庫(kù)有D3.js，常用來(lái)進(jìn)行數(shù)據(jù)可視化。以后學(xué)習(xí)，留坑。

7.4 WebGL

WebGL全稱(chēng)為網(wǎng)頁(yè)圖像庫(kù)（Web Graphics Library）。成熟的庫(kù)有three.js，常用來(lái)基于web的3D制作。以后學(xué)習(xí)，留坑。

總結(jié)

本文主要參考W3School，部分來(lái)自《CSS設(shè)計(jì)指南》和平常遇到問(wèn)題時(shí)的一些總結(jié)，少部分來(lái)自菜鳥(niǎo)教程。GIF制作工具使用的是ScreenToGif 1.4.2。

碼這篇文章碼了好久啊，部分內(nèi)容由于懶，就沒(méi)有完整的寫(xiě)出來(lái)。

這是前端總結(jié)的第二篇文章，進(jìn)度還是挺慢的。大概過(guò)了5天，才更新到第二篇。那我都在干啥呢？在總結(jié)JS啊。當(dāng)然，只是做了大概的總結(jié)，并沒(méi)有寫(xiě)成很詳細(xì)的文檔。因此，CSS基礎(chǔ)篇的文檔更新奇慢，接下來(lái)要做的事情就是提升更新的速度（保證質(zhì)量的前提下）。Fighting。

總結(jié)

以上是生活随笔為你收集整理的前端总结·基础篇·CSS（二）视觉的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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