CSS基础属性介绍 - Web

TOP

CSS基础属性介绍(四)

2019-09-03 03:42:50 【大中小】浏览:84次

数，因为人眼睛需要每秒24帧的变化才能显示出比较平滑的动画效果；

animation-timing-function：动画的变化的速度曲线，可以是线性的，或者一开始慢后面快，或者反过来，或者先慢后快结束的时候再慢等选项，也可以通过指定三次贝塞尔函数 cubic-bezier(n,n,n,n) 来选择不同的动画效果；

animation-delay：在动画开始之前的延迟；

animation-iteration-count：默认为1，可以为任意整数，也可以设置为枚举值 infinite 从而无线循环；

animation-direction：枚举值，默认为normal，即正常播放动画，可以设置为 alternate 该值得含义是奇数次正向播放，偶数次反向播放；当然，如果 animation-iteration-count 设置为1的话，该属性就没有意义了；

animation-play-state：paused和running的枚举值，可以对动画进行暂停和继续的操作，类似视频播放的感觉；

animation-fill-mode：在动画开始之前和之后属性的应用值；

animation：综合如上所有属性的一个简写属性

各简写属性出现的顺序并没有明确规定，而且没有任何一个属性是必须的；
只有时间的值可能会出现0，1,2次，当出现1次的时候表示的是 animation-duration 的值，如果出现2次代表的是 animation-delay 的值
可以有多组值，用逗号做分割，表示多个动画效果同时显示和起作用

transition-property：对该元素哪个属性的变化进行动画效果
1. 当然，不是所有的属性都支持动画的，常见的位置、大小、颜色、以及旋转之类的都是支持的，详细支持列表请参考这里
2. 只要属性发生变化，都会实现动画效果，比如hover属性或者js变化属性
transition-duration：动画的持续时间
transition-delay：动画开始的延迟时间
transition-timing-function：动画的速度函数，可以是匀速，也可以是变速，也可以是指定函数
transition：是如上几个属性定的简写属性
1. 几个属性出现的顺序没有明确规定，如果是时间字段的话，第一个是duration，第二个是delay-time
2. 一些常见的动画效果示例请参考这里。

其他

在实际应用场景中，主要使用的是em和px两个类型的长度。

颜色：
1. 枚举值
  1. 比如red, blue, yellow一共大概有将近150个预定义的颜色，详细请参考这里
2. RGB立体坐标
  1. RGB || #RRGGBB
    1. 当设置为#RGB的时候，跟#RRGGBB是一样的，比如#F03，效果跟#FF0033是一样的
  2. 可以用rgb(r_int, g_int, b_int)来表示，跟上面表示是类似的，只不过一个用的是16进制，一个用的是十进制
  3. 可以用rgba(r_int, g_int, b_int, 透明度)，透明度得分从0~1的浮点数，0是透明，1是不透明
3. HSL圆柱坐标
  1. hsl(色相, 饱和度, 明度)
    1. 色相是一个彩虹圆环的角度值，red为0/360，green为120，blue为240；
    2. 饱和度是颜色的显示强度，如果为0就是黑白照片即某种灰色
    3. 明度是明亮度，如果是100%，就是白色了，如果是0%，那就是黑色了
  2. hsla，跟rgba一样可以增加一个透明度的参数
渐变函数
1. 渐变函数是一种自定义的image表示方法，使用示例参考这里
2. 直线渐变：linear-gradient(角度，方向，颜色列表)，在颜色后面还可以跟一个比例表示位置从什么地方开始渐变
3. 圆形渐变：radial-gradient(颜色列表)
4. 重复渐变：重复渐变（即条纹装渐变）