transition过渡+text-shadow文字阴影+新增颜色+实例
Transition:过渡
Transition：none | property duration [delay] [timing-function ]
transition-property： 属性的名称： （当指定CSS 属性改变时，过渡效果将开始）
-all 所有属性都将获得过渡效果( 默认)
-attr 过渡效果的 CSS 属性名称列表，列表以逗号分隔。
-none 没有属性会获得过渡效果。
transition-duration 过渡时间：完成过渡效果需要的时间（以秒或毫秒计）
transition-delay 延迟时间：等~（以秒或毫秒计）之后再变化
transition-timing-function 运动形式 ：(速度曲线)
linear： 匀速
ease：（默认值） 慢快慢
ease-in： 慢入
ease-out： 慢出
ease-in-out： 慢入慢出
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）
X1 起点在X轴的坐标,为0~1
Y1 起点在Y轴的坐标,不限
X2 终点在X轴的坐标,为0~1
Y2 终点在Y轴的坐标,不限
起点:对应的 y=x 为匀速， y>x 为加速 y
终点:对应的 y=x 为匀速， y>x 为减速 y
参考：http://matthewlein.com/ceaser/
多属性不同步变化 transition:width 2s,height 1s 2s;
animation:动画
animation必须与@keyframes一起使用
animation: name duration [timing-function] [delay] [iteration-count] [direction] [play-state] [fill-mode];
animation-name: 动画名称
none：不引用任何动画名称
animation-duration: 动画执行时间 (单位：s ms)
animation-delay: 动画效果延迟时间(单位：s ms)
animation-timing-function: 动画速度曲线,同 transition-timing-function
linear
ease （默认）
ease-in
ease-out
ease-in-out
cubic-bezier()
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 {
keyframes-selector { css-styles }
keyframes-selector { css-styles }
}
animationname animation的名称。
keyframes-selector 动画时间的百分比。
合法值：0-100% | from to
您可以用一个动画keyframes-selectors。
css-styles 一个或多个合法的CSS样式属性
例如：
@keyframes run {
0%{width:0px,background:red;}
100%{width:500px,background:greend;}
}
当帧动画一样的时候： 例如：
@keyframes run {
0%{width:0px,background:red;}
20%{width:0px,background:red;}
80%{width:500px,background:greend;}
100%{width:500px,background:greend;}
}
可以写成
@keyframes run {
0%，20%{width:0px,background:red;}
80%，100%{width:500px,background:greend;}
}
新增颜色
rgba(R,G,B,A) 透明颜色值
HSL：
H:Hue(色调)。
0(或360)表示红色， 120表示绿色，240表示蓝色，取值为：0 - 360
S：Saturation(饱和度)
取值为：0% - 100% 值越大颜色越纯
L Lightness（亮度）
取值为（0%-100%） 变暗 < 50%最纯 >变亮
例如：background:hsl(360,100%,50%);
HSLA：
A：
Alpha透明度。 取值0~1之间。
currentcolor 当前色 currentcolor等于当前的color值
text-shadow文字阴影
参数
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的半径。
color 可选。阴影的颜色
阴影叠加（可重复叠加）
text-shadow:2px 2px 0px red, 2px 2px 4px green; 先渲染后面的，再渲染前面的
text-shadow实例
层叠：
color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：
color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
自定义字体
@font-face {
font-family: ‘iconfont'; /*自定义字体名称*/
src: url('iconfont.eot'); /*字体路径*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#untitledregular') format('svg');
}
生成兼容代码http://www.fontsquirrel.com/fontface/generator
文字渐变
我是帅哥