HTML5--(3)过渡+动画+颜色+文本
一.过渡transition
- transition-property指定属性名称 （如width、height、background-color、内外边距）
- all 所有属性都将获得过渡效果(默认)
- attr 过渡效果的CSS属性名称列表,列表以逗号分隔
- none 没有属性会获得过渡效果
- transition-duration过渡时间 3s (默认慢快慢)
- transform:rotate(360deg) 旋转
transform:scale(1.5) 变大缩放
- transition-delay延迟事件,多久之后再开始执行动画
- transition-timing-function运动形式
- linear 匀速
- ease 慢块慢(默认)
- ease-in 慢入
- ease-out 慢出
- ease-in-out 慢入慢出
- 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动画名称
- none 不引用任何动画名称
- animation-duration动画执行时间
- animation-delay动画效果延迟时间
- animation-timing-function动画速度曲线
- liner匀速
- ease慢块慢(默认)
- ease-in慢入
- ease-out慢出
- ease-in-out慢入慢出
- cubic-bezier贝塞尔曲线(x1,y1,x2,y2)
- animation-iteration-count动画执行循环次数
- infinite 无限循环
- 默认 1次
- animation-direction动画是否反响运动
- normal 默认 正常方向
- reverse 反方向运动
- alternate 动画先正后反方向运行
- alternate-reverse 先反后正方向运行
- animation-play-state动画执行状态
- running 运动 默认
- paused 暂停
- animation-fill-mode动画对象时间之外的状态
- none 默认 原始状态>动画>原始状态
- forwards 原始状态>动画>停在动画帧100%
- backwards (忽略原始状态)进入动画帧0%>动画>原始状态
- both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%
三.规定动画帧@keyframes
- @keyframes animationname{}
- @keyframe animationname{ 动画名字 随便取
- keyframes-selector{css-styles}
- keyframes-selector{css-styles}
- }
- animationname animation的名称
- keyframes-selector 动画时间百分比
1. 合法值:0-100% | from to - css-styles 一个或多个合法的css样式属性
@keyframes run{
0%{width:0px,background:red;}
100%{width:50px,background:green;}
}
四.新增颜色模式
- rgba(R,G,B,A)
透明颜色值 - HSL
- H:Hue(色调)
1. 0(或360)表示红色
2. 120绿色,240蓝色,取值为:0-360 - S:Saturation(饱和度)
1.取值为:0%-100%值越大颜色越纯 - L:Lightness(亮度)
1.取值为:0%-100%变暗<50%>变亮
background:hsl(360,100%,50%);
- HSLA
- A:Alpha(透明度) 取值0-1之间
- currentcolor 当前色 (取当前给定的字体颜色如果没有字取color)
五.文字阴影text-shadow
- text-shadow:x y blur color;
1. h-shadow 必须,水平阴影的位置,可以为负值
2. v-shadow 必须,垂直阴影的位置,允许为负值
3. blur 可选,模糊半径 （可写可不写）
4. color 可选,阴影的颜色（可写可不写 不写阴影就是字体颜色） - 阴影叠加
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文字的描边
