<meta charset="utf-8">
1 漸變(linear)
漸變一般用于背景顏色的設(shè)置上
1 線性漸變
使用方向：
語法： background: linear-gradient(direction, color-stop1, color-stop2, ...);
可規(guī)定不同方向拭荤，向上/向下/向左/向右/對角绵疲，如：
.linear{ float: left; margin-left: 20px; width: 400px; height: 400px; text-align: center; line-height: 400px; color: #ffffff; } .linear-down{ background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } .linear-up{ background: -webkit-linear-gradient(down,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(top,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(top,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to top,red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } .linear-left{ background: -webkit-linear-gradient(right,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to left,red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } .linear-right{ background: -webkit-linear-gradient(left,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right,red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } <div class="linear-down linear"> 這是背景向下的漸變 </div> <div class="linear-up linear"> 這是背景向上的漸變 </div> <div class="linear-left linear"> 這是背景向左的漸變 </div> <div class="linear-right linear"> 這是背景向右的漸變 </div>
效果如下：
注意：最好是將各個瀏覽器的屬性都寫上瓤漏，標(biāo)準(zhǔn)語法寫在后面测蘑，標(biāo)準(zhǔn)語法 to + 方向谨朝，比如向左的話是 to left犀暑，而除了 webkit 中第一個屬性是 起始點(diǎn)位帽揪，如向下是 top戏罢，其他都是 方向向哪（比如向下 就是 down）屋谭，默認(rèn)的話是從上往下。
對角也是如此龟糕，就第一個參數(shù)使用兩個方向桐磁，如 left top
使用角度：
語法： background: linear-gradient(angle, color-stop1, color-stop2, ...);
角度是指水平和漸變線的角度，按逆時針方向計(jì)算讲岁。換句話說我擂，0deg 將創(chuàng)建一個從下到上的漸變衬以，90deg 將創(chuàng)建一個從左到右的漸變。
.linear{ float: left; margin-left: 20px; width: 400px; height: 400px; text-align: center; line-height: 400px; color: #ffffff; } .linear-0{ background: -webkit-linear-gradient(0deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(0deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(0deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(0deg,red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } .linear-90{ background: -webkit-linear-gradient(90deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(90deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(90deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(90deg,red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } .linear-180{ background: -webkit-linear-gradient(180deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg,red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } .linear--90{ background: -webkit-linear-gradient(-90deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(-90deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(-90deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(-90deg,red, blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } <div class="linear-0 linear"> 0deg </div> <div class="linear-90 linear"> 90deg </div> <div class="linear-180 linear"> 180deg </div> <div class="linear--90 linear"> -90deg </div>
2 徑向漸變
由中心往兩邊擴(kuò)散校摩，由中心定義看峻，同時，也可以指定漸變中心衙吩，形狀（圓形或橢圓形）互妓，大小
語法：background: radial-gradient(center, shape size, start-color, ..., last-color);
第一個參數(shù)設(shè)定中心點(diǎn)位置，第二個是尺寸大小坤塞，如：
#grad1 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } #grad2 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } #grad3 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } #grad4 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */ } <h3>徑向漸變 - 不同尺寸大小關(guān)鍵字的使用</h3> <p><strong>closest-side：</strong></p> <div id="grad1"></div> <p><strong>farthest-side：</strong></p> <div id="grad2"></div> <p><strong>closest-corner：</strong></p> <div id="grad3"></div> <p><strong>farthest-corner（默認(rèn)）：</strong></p> <div id="grad4"></div>
效果如下：
2 過渡(transition)
元素從一種樣式到另一種樣式時為元素添加效果冯勉，通常需要 CSS 屬性改變，需要一個觸發(fā)點(diǎn)摹芙，典型事件就是鼠標(biāo)指針位于元素上
語法： transition是簡寫珠闰，有四個屬性
transition-property：規(guī)定應(yīng)用過渡的 CSS 屬性名稱
transition-duration：過渡效果花費(fèi)的時間，默認(rèn)為0
transition-timing-function： 過渡效果時間曲線瘫辩，默認(rèn)是“ease（平滑）”
transition-delay： 規(guī)定過渡效果何時開始伏嗜，默認(rèn)是0
如：transition： width 1s linear 2s
transition-timing-function能取的值
1 linear：規(guī)定以相同速度開始到結(jié)束的過渡效果
2 ease： 規(guī)定慢速開始，然后變快伐厌，然后再慢速結(jié)束的過渡效果
3 ease-in： 規(guī)定慢速開始的過渡效果
4 ease-out： 規(guī)定慢速結(jié)束的過渡效果
5 ease-in-out：規(guī)定那個慢速開始和結(jié)束的過渡效果
div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } div:hover { width:200px; } <body> <div></div> <p>請把鼠標(biāo)指針放到黃色的 div 元素上承绸，來查看過渡效果。</p> <p><b>注釋：</b>本例在 Internet Explorer 中無效挣轨。</p> <p><b>注釋：</b>這個過渡效果會在開始之前等待兩秒军熏。</p> </body>
效果如下：
2s后，寬度會變長
而當(dāng)鼠標(biāo)移開時卷扮，就恢復(fù)原狀
2 轉(zhuǎn)換(transform)
轉(zhuǎn)換的2D 轉(zhuǎn)換方法：
- translate(x荡澎，y) --- 移動，沿著 X 和 Y軸移動元素 x 和 y
- rotate() --- 順時針旋轉(zhuǎn)角度
- scale() --- 縮放晤锹，給定寬度（x軸）和高度（Y軸）參數(shù)
- skew() --- 翻轉(zhuǎn)摩幔，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)
- matrix --- 所有2D轉(zhuǎn)換的組合
語法： transform： translate(40px,50px)【這里加轉(zhuǎn)換方法】
如：
<style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -moz-transform:translate(50px,100px); /* Firefox */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ -o-transform:translate(50px,100px); /* Opera */ } </style> </head> <body> <div>你好鞭铆。這是一個 div 元素或衡。</div> <div id="div2">你好。這是一個 div 元素车遂。</div>
效果如下：
重點(diǎn)說一下3D轉(zhuǎn)換的方法
轉(zhuǎn)換是使元素改變形狀封断、尺寸和位置的一種效果
其實(shí)3D 轉(zhuǎn)換就是將坐標(biāo)系擴(kuò)展到三維，也就是有Z軸舶担，常見 3D 轉(zhuǎn)換方法
-- rotateX() 繞 X 軸給定度數(shù)進(jìn)行旋轉(zhuǎn)
-- rotateY() 繞 Y 軸給定度數(shù)進(jìn)行旋轉(zhuǎn)
-- translateZ() 在 Z 軸移動元素位置
-- translate3d(x,y,z)坡疼， 定義 3D 轉(zhuǎn)化
開啟GPU加速，其中一個方法是將視圖層弄成復(fù)合圖層衣陶，GPU對其進(jìn)行渲染柄瑰，而 3D 方法是可以將視圖層弄成復(fù)合圖層的废岂，所以轉(zhuǎn)換成 3D 的方法都是可以開啟GPU加速渲染的
3 動畫(animation)
css3@keyframes 規(guī)則
@keyframes 規(guī)則用于創(chuàng)建動畫。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式狱意，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果。語法如下：
@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }
css3動畫
@keyframes 規(guī)則創(chuàng)建動畫后拯欧，要捆綁在某個選擇器详囤，否則不會產(chǎn)生效果
通過規(guī)定至少以下兩項(xiàng) CSS3 動畫屬性，即可將動畫綁定到選擇器：
- 規(guī)定動畫的名稱
- 規(guī)定動畫的時長
如：
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
實(shí)例如下：
<style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> </head> <body> <div></div> <p><b>注釋：</b>當(dāng)動畫完成時镐作，會變回初始的樣式藏姐。</p> <p><b>注釋：</b>本例在 Internet Explorer 中無效。</p> </body>
C333 動畫屬性
animation： 所有動畫屬性的簡寫该贾，除了 animation-play-state 屬性羔杨。
animation-name：動畫名稱
animation-duration：動畫時長。默認(rèn)0
animation-timing-function： 動畫速度曲線杨蛋，默認(rèn)“ease”
animation-delay：動畫何時開始兜材，默認(rèn)0
animation-iteration-count：n / infinite（無限次） 動畫播放次數(shù)，默認(rèn)1
animation-direction：normal / alternate(反向) 規(guī)定動畫是否在下一周期逆向播放逞力。默認(rèn)是“normal”曙寡，
