一、漸變
漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實作許多炫麗的效果，有效的減少圖檔的使用數量，并且具有很強的适應性和可擴充性。
可分為線性漸變、徑向漸變
1、 線性漸變 （gradient 變化）
linear-gradient線性漸變指沿着某條直線朝一個方向産生漸變效果。
linear-gradient:方向，起始顔色，終止顔色
方向：to left/ to right / to top 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>漸變</title>
6 <style>
7 div{
8 width: 1000px;
9 height: 100px;
10 margin: 30px auto;
11 border:1px solid #000;
12 }
13 /*linear-gradient:方向 起始顔色 終止顔色*/
14 /*方向：to left to right to top*/
15 div:nth-child(1){
16 background-image: linear-gradient(to right,yellow,green);
17 }
18 /*不寫方向，預設從上到下*/
19 div:nth-child(2){
20 background-image: linear-gradient(yellow,green);
21 }
22 /*方向可以寫角度 deg*/
23 div:nth-child(3){
24 width: 100px;
25 height: 100px;
26 background-image: linear-gradient(45deg,yellow,green);
27 }
28 /*用百分比控制漸變的範圍*/
29 div:nth-child(4){
30 background-image: linear-gradient(to right,yellow 0%,red 40%,blue 100%);
31 }
32 /*顔色突變*/
33 div:nth-child(5){
34 background-image: linear-gradient(45deg,yellow 0%,yellow 25%,blue 25%,blue 50%,red 50%,red 75%,green 75%,green 100%);
35 }
36 div:nth-child(6){
37 background-image: linear-gradient(135deg,
38 #000 0%,
39 #000 25%,
40 #fff 25%,
41 #fff 50%,
42 #000 50%,
43 #000 75%,
44 #fff 75%,
45 #fff 100%);
46 background-repeat: repeat;
47 background-size: 100px 100%;
48 }
49 </style>
50 </head>
51 <body>
52 <div></div>
53 <div></div>
54 <div></div>
55 <div></div>
56 <div></div>
57 <div></div>
58 </body>
59 </html>
運作效果：
2、徑向漸變
radial-gradient徑向漸變指從一個中心點開始沿着四周産生漸變效果
1、必要的元素：
a、輻射範圍即圓半徑 (半徑越大，漸變效果越大)
b、中心點 即圓的中心 (中心點的位置是以盒子自身)
c、漸變起始色
d、漸變終止色
2、關于中心點：中心位置參照的是盒子的左上角
3、關于輻射範圍：其半徑可以不等，即可以是橢圓
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>徑向漸變</title>
6 <style>
7 div{
8 width: 200px;
9 height: 200px;
10 border:1px solid #000;
11 margin: 20px 20px;
12 float: left;
13 }
14
15 /* 徑向漸變：
16 radial-gradient(輻射半徑，中心的位置，起始顔色，終止顔色)
17 中心點位置：at left right center bottom top*/
18 div:nth-child(1){
19 background-image: radial-gradient(at left top,red,blue);
20 }
21 div:nth-child(2){
22 background-image: radial-gradient(at 50px 50px,red,blue);
23 }
24
25 /* 在at前可加輻射半徑*/
26 div:nth-child(3){
27 background-image: radial-gradient(100px at 50px 50px,red,blue);
28 }
29
30 /*多個顔色漸變*/
31 div:nth-child(4){
32 background-image: radial-gradient(at 50px 50px,red 10%,blue 60%,yellow 75%);
33 }
34
35 /*橢圓漸變*/
36 div:nth-child(5){
37 background-image: radial-gradient(at 50px 100px,red 10%,blue 60%,yellow 75%);
38 }
39
40 /*球體 用rgba控制透明度，實作立體效果*/
41 div:nth-child(6){
42 border-radius: 50%;
43 border: 0;
44 background-color: blue;
45 background-image: radial-gradient(at 80px 80px,rgba(0,0,0,0),rgba(0,0,0,0.6) );
46 }
47
48 </style>
49 </head>
50 <body>
51 <div></div>
52 <div></div>
53 <div></div>
54 <div></div>
55 <div></div>
56 <div></div>
57
58 </body>
59 </html>
運作效果：
二、過渡(transition)
1、Transition:param1 param2
param1 要過渡的屬性
param2 過渡的時間.
過渡是CSS3中具有颠覆性的特征之一，可以實作元素不同狀态間的平滑過渡（補間動畫），經常用來制作動畫效果。
補間動畫：自動完成從起始狀态到終止狀态的的過渡。不用管中間的狀态
幀動畫：撲克牌切換.通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片
特點：目前元素隻要有“屬性”發生變化時，可以平滑的進行過渡。
1 .box{
2 width: 200px;
3 height: 200px;
4 border:1px solid #000;
5 margin: 100px auto;
6 background-color: red;
7 /*transition: width 2s,background-color 2s;*/
8 /*如果多個過渡的特效相同，可以簡寫，過渡必須加給盒子本身*/
9 /*transition:過渡屬性,過渡時間,速度曲線(linear勻速),延遲時間*/
10 transition: all 2s linear 1s;
11 }
12
13 /*過渡屬性*/
14 .box:hover{
15 width: 600px;
16 background-color: blue;
17 } 2、 過渡屬性
- transition-property設定過渡屬性
- transition-duration設定過渡時間 用來控制速度linear(勻速)
- ease(減速) / ease-in(加速) / ease-out(減速) / ease-in-out(先加速後減速)
- transition-timing-function設定過渡速度
- transition-delay設定過渡延時 超過時間後執行動畫.
如果所有屬性都過渡，可以使用transition-property:all; 1 .box{
2 width: 200px;
3 height: 200px;
4 background-color: red;
5 margin: 100px auto;
6
7 /*過度屬性詳解*/
8 transition-property: width;/*過度屬性*/
9 transition-duration: 2s;/*過渡持續時間*/
10 transition-timing-function: linear;/*運動曲線 linear 線性*/
11 /* transition-timing-function: ease(減速)/ease-in(加速)/ease-out(減速)/ease-in-out(先加速後減速);*/
12
13 /*過渡延遲*/
14 transition-delay: 1s;
15 /*如果所有屬性都過渡，可以使用transition-property:all;*/
16
17 }
18 .box:hover{
19 width: 600px;
20 } ![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)