HTML5--(3)過渡+動畫+顏色+文本

一.過渡transition

• transition-property指定屬性名稱 （如width、height、background-color、內外邊距）
  
  
  • all 全部屬性都將得到過渡效果(默認)
1. attr 過渡效果的CSS屬性名稱列表,列表以逗號分隔
2. none 沒有屬性會得到過渡效果
• transition-duration過渡時間 3s (默認慢快慢)
• transform:rotate(360deg) 旋轉

transform:scale(1.5) 變大縮放

• transition-delay延遲事件,多久以後再開始執行動畫
• transition-timing-function運動形式 
  
  
1. linear 勻速
2. ease 慢塊慢(默認)
3. ease-in 慢入
4. ease-out 慢出
5. ease-in-out 慢入慢出
6. cubic-bezier 貝塞爾曲線(x1,y1,x2,y2) 
   1. x1起點在x軸的座標 爲0-1 
   2. y1起點在y軸的座標 不限 
   3. x2終點在x軸的座標 爲0-1 
   4. y2終點在y軸的座標不限 
   起點對應的 y=x 爲勻速,y>x 爲加速,y<x 爲減速 
   終點對應的 y=x 爲勻速,y>x 爲減速,y<x 爲加速 
   參考:http://matthewlein.com/ceaser/
• 複合樣式transition:property duration delay timing-function;
• 多屬性寫法transition:width 2s,height 4s;

二.動畫animation

注意:animation必須與@keyframes一塊兒使用

• animation-name動畫名稱 
  
  
1. none 不引用任何動畫名稱
• animation-duration動畫執行時間
• animation-delay動畫效果延遲時間
• animation-timing-function動畫速度曲線 
  
  
1. liner勻速
2. ease慢塊慢(默認)
3. ease-in慢入
4. ease-out慢出
5. ease-in-out慢入慢出
6. cubic-bezier貝塞爾曲線(x1,y1,x2,y2) 
• animation-iteration-count動畫執行循環次數 
  
  
1. infinite 無限循環
2. 默認 1次
• animation-direction動畫是否反響運動 
  
  
1. normal 默認 正常方向
2. reverse 反方向運動
3. alternate 動畫先正後反方向運行
4. alternate-reverse 先反後正方向運行
• animation-play-state動畫執行狀態 
1. running 運動 默認
2. paused 暫停
• animation-fill-mode動畫對象時間以外的狀態 
1. none 默認 原始狀態>動畫>原始狀態
2. forwards 原始狀態>動畫>停在動畫幀100%
3. backwards (忽略原始狀態)進入動畫幀0%>動畫>原始狀態
4. both (忽略原始狀態)進入動畫幀0%>動畫>停在動畫幀100%

 

三.規定動畫幀@keyframes

• @keyframes animationname{}

• @keyframe animationname{ 動畫名字 隨便取
•         keyframes-selector{css-styles}
•         keyframes-selector{css-styles} 
• }

1. animationname animation的名稱
2. keyframes-selector 動畫時間百分比 
   1. 合法值:0-100% | from to
3. css-styles 一個或多個合法的css樣式屬性

@keyframes run{

    0%{width:0px,background:red;}

    100%{width:50px,background:green;}

}

四.新增顏色模式

• rgba(R,G,B,A)透明顏色值
• HSL 
  
  
1. H:Hue(色調) 
   1. 0(或360)表示紅色 
2. 120綠色,240藍色,取值爲:0-360
2. S:Saturation(飽和度) 
   1. 取值爲:0%-100% 值越大顏色越純
3. L:Lightness(亮度) 
   1. 取值爲:0%-100% 變暗<50%>變亮

background:hsl(360,100%,50%);

• HSLA 
  
  
1. A:Alpha(透明度) 取值0-1之間

 

• currentcolor 當前色 (取當前給定的字體顏色若是沒有字取color)

 

五.文字陰影text-shadow

1. text-shadow:x y blur color; 
   1. h-shadow 必須,水平陰影的位置,能夠爲負值 
   2. v-shadow 必須,垂直陰影的位置,容許爲負值 
   3. blur 可選,模糊半徑 （可寫可不寫）
   4. color 可選,陰影的顏色（可寫可不寫 不寫陰影就是字體顏色）
2. 陰影疊加 
   text-shadow:2px 2px 0px red,2px 2px 4px green;

 

六.文字描邊

• text-stroke-width 谷歌不支持(須要加兼容前綴-webkit-text-stroke-width)
  設置或檢索對象中的文字的描邊厚度
• text-stroke-color 
  設置或檢索對象中的文字的描邊顏色
• text-stroke:text-stroke-width text-stroke-color文字的描邊