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文字的描边