一、漸變
漸變是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 }