18910140161

Css

首页 >> 前端开发 >> Css

CSS3概述_动画滤镜

顺晟科技

2021-06-30 17:15:18

310

CSS3全览_动画+滤镜

目录
  • CSS3全览_动画+滤镜
    • 1. 列表和生成的内容
    • 2. 变形
    • 3. 过渡
    • 4. 动画
    • 5. 滤镜, 混合, 裁剪和遮罩
    • 6. 针对特定媒体的样式

作者: https://www.likecs.com/xiaxiangx/

1. 列表和生成的内容

  1. 列表

    • 列表的列线, list-style-type, 如果不想显示记号, 使用 none, none的作用是禁止在本该显示记号的位置上出现任何内容, 不过却不阻断有序列表的计数. list-style-type 的值是继承的, 如果希望嵌套的列表使用不同的记号, 要分别定义.
      • 字符串记号, list-style-type: "%"; 目前, 只有 Firefox 族浏览器支持字符串记号
    • 项目列表图像, list-style-image, 取值, url, iamge, none, inherit, 默认是继承的, 更好提供一个默认 list-style-type, 后备记号类型, list-style-image 的值可以是任何图像值, 包括渐变图像, 渐变记号的一个缺点是尺寸特别小, 这个尺寸不受CSS 的控制, 并且支持的浏览器也少
    • 列表记号的位置, list-style-position, 取值, inside, outside( 初始值 ), inherit,
    • 列表样式的简写属性, list-style, 例如: li{list-style: url(ohio.gif) square inside;}
    • 列表的布局
      • 记号与列表项目内容之间的距离不是 CSS 定义的, 列表项目本质上是类似块级的元素. list-item 值生成的就是块级框. 列表项目和列表元素都是块级框

  2. 生成的内容

    • 插入生成的内容, ::before 和 ::after 伪元素插入文档

      • 如果 ::before 或 ::after 选择符的目标是块级元素, 那么 display 属性的值只能为 none, inline, block 或 marker. 其他值都当做 block
      • 如果 ::before 或 ::after 选择符的目标是行内元素, 那么 display 属性的值只能为 none 或 inline, 其他值都当做 inline
      • 生成的内容会从依附的元素上继承属性值

    • 指定内容, content, 取值, normal(初始值), <string>, <uri>, <counter>, attr(<identifier>), open-quote, close-quote, no-open-quote, no-close-quote, inherit,

      • 字符串值显示为字面量, uri, 指向的外部资源将插入文档的适当位置
      • 插入属性值, 把元素的属性值显示在文档中, content: attr(href); 如果引用的属性不存在, 所在的位置将显示空字符串
      • 生成引号, quotes, 取值, 一对或多对字符串, 比如设置了 quotes: ' "" ' ' "" ';设置两个双引号, 使用时, content: open-quote, 或 content: close-quote, 插入的值来自 quotes, 如果引号嵌套的层级比定义的引号对多, 后续的层级都使用最后一对引号.
      • 如果引用的文本分成多段, 每一段结尾处的引号通常不显示, 使用 no-close-quote 实现, 对应的还有 no-open-quote 关键字

    • 计数器

      • 重置和增量, counter-reset, 设置起点, h1{counter-reset: CHapter 4 section -1 subsec fugure 1;}

      • 为了计数, 需要通过一个属性指明通过哪个元素递增计数器. counter-increment, 默认为1, 为负数, 递减, 为正数, 递增

        ol{ counter-reset: ordered;} /*默认为0*/
ol li {counter-increment: ordered;} /*默认为1*/
ol li{counter-increment: -1} /*每次减1*/

      • 使用计数器, 需要使用 content 属性及与计数器有关的值, content: counter(ordered);

        h1 {counter-reset: section subsec;
	counter-increment: chapter;}
h1::before{countent: counter(chpter) "." ;}
h2 {counter-reset: subsec;
	counter-increment: section;}
h2::before{content: counter(chapter)"." counter(section)". ";}
h3 {counter-increment: subsec;}
h3::before{content: counter(chapter)"." counter(section)"."counter(subsec)".";}

      • display 属性的值为 none 的元素不递增计数器, 即便样式规则看似不是这样. visibility 属性的值为 hidden 的元素依然递增计数器

      • 计数器的作用域, counter-reset: ordered 每层嵌套都会新建一个 ordered 计数器. 如果希望嵌套的新计数器追加到现有的计数器上, 实现 1, 1.1, 1.2, 可以使用counters()

        ol{counter-reset: ordered; list-style: none;}
ol li:before {content: counters(ordered,".")"."; counter-increment: ordered;}

  3. 定义计数模式

    • @counter-style <name> { ... declarations... } , 目前只有火狐支持

      • 若想交替显示三角形记号

        @counter-style triangles{
    system: cyclic;
    symbols: → △
}

      • 可用的描述符, system, symbols, additive-symbols, prefix, suffix, negative, range, fallback, pad, speak-as

    • 固定计数模式, system: fixed;, 定义的计数器记号数量有限, 用完不重复. 把所有的symbols中的符号都用引号引起来, 可以在 system 描述符中定义起始值.

      @counter-style emoji{
    system: fixed 5; /*计数从5开始*/
    symbols: "#" "$" "%";
}

    • 循环计数模式, system: cyclic; 定义的符号按顺序使用, 一次又一次, 直到计数序列中没有记号为止. 循环模式可以只用一个记号, 这与为 list-style-type 提供一个字符串的效果差不多.

      • 所有的计数器后面都有个句点. 这是因为 suffix 描述符的默认值就是句点. suffix 描述符有个同类, prefix. 使用这两个描述符可以定义在每个记号前面和后面的符号, 使用方法如下
      @counter-style wingthinker{
    system: cyclic;
    symbols: "$";
    prefix: "~";
    suffix: "~";
}
ul.hmmm {list-style: winghker;}

    • 符号计数式, system: symbolic; 与循环系统类似, 不过在符号系统中国, 每循环一次符号重复多一次.

      • @counter-style footnotes{
    system: symbolic;
    symbols: "*" "丿";
    suffix: " ";
}

      • range 描述符, 它的值为一对或多对以空格分开的值, 每一对之间以逗号分隔, 多出的以原始形式展示

      • 不在 range 定义的范围内的计数器, 可以使用 fallback 描述符自定义, 如果主计数系统无法表示计数器中的某个值, 也将使用后备计数格式

      • @counter-style letters{
    system: symbolic;
    symbols: A B C D E;
    range: 1 14, 100, 105;
    fallback: hebrew
}

    • 字母计数模式, system: alphabetic 计数系统与 symbolic 系统十分相似, 重复的方式不同, symbols 描述符的值至少有两个符号.

    • 数字计数模式, system: numeric; 可以定义16进制计数系统

      • 负值使用 negative 描述符处理, negative 只能在支持负值的技术系统中使用, 包括 alphabetic, numeric, symbolic 和 additive

      • negative 有点像 prefix 和 suffix 的综合体, 只不过仅在计数器为负值的时候起作用

      • @counter-style accounting{
    system: numeric;
    symbols: '0' '1' '2';
    negative: "(" ")";
    prefix: "$";
    suffix: "-";
}
ol.kaching{ list-style: accounting;}

      • 数字计数系统的另一个特性是为位数较少的值补全, 让长度保存与位数较多的值相同, 这需要使用 pad 描述符

      • pad 描述符, 部分是一个真实, 定义每个计数器有几位数, 第二部分是一个字符串, 用于填充位数不足的值. 负号算在记号的长度内

      • @counter-syle accounting{
	system: numeric;
    symbols: '0' '1' '2';
    pad: 4 "0";
    suffix: ".";
}

    • 累加计数模式, system: additive-symbol

      • @counter-style roman{
    system: additive;
    additive-symbols:
        100 M, 900 CM, 500 D, 400 CD,
        100 C, 90 XC, 50 L, 40 XL,
        10 X, 9 IX, 5 V, 4 IV, 1 I;
}

      • 典型的罗马计数风格

    • 扩展计数模式, extends , 算是一种计数系统

      • @counter-style mydecimals{
    system: extends decimal;
    suffix: ")";
    pad: 2 "0";
}

    • 发音计数模式, speak-as 描述符, 取值, auto, bullets, numbers, words, spell-out, <counter-style-name>


2. 变形

利用 CSS 提供的变形功能, 不仅能平移元素, 还能做很多其他的事

  1. 坐标系
    • 2d 变形只需关注 x 轴和 y 轴. translateX(-5em) translateY(33px)
    • 2d 旋转,
  2. 变形
    • transform, 取值, <transform-list> 受 CSS 控制的元素, 其范围框是边框框, 计算范围框时, 轮廓的外边距不算在内
      • 如果使用 CSS 改变可缩放矢量图形 ( scalable vector graphic, svg) 的形态, 其范围框是 SVG 图形定义的对象范围框.
      • 变形的元素有自己的堆叠上下文, 经过缩放的元素可能比变形前大或小, 不过元素在页面上所占的空间与变形前保存不变, 这一点对所有变形函数都成立.
      • 变形函数 从头到尾的处理顺序是很重要的, 顺序变了, 得到的结果可能就大有不同, 所有变形都是相对元素自己的参照系实施的
      • 变形函数, translate(), translate3d(), translateX(), translateY(), translateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), skew(), skewX(), skewY(), matrix(), matrix3d(), persperctive()
      • transform 属性的值通常由空格分隔的一个或多个函数, 各函数从头 (左) 至尾 (右)一次处理, 而且每个函数的值都必须是有效的, 倘若有一个函数的值是无效的, 那么 transform 属性的整个值都将失效, 因而也就不做任何变形
      • 平移函数, translateX, translateY, translateZ, 可以是数字, 可以是百分数, 百分数相对于自己的长度而言, translate() 能同时改变x,y, 只有一个参数的情况下, y值改变默认0. translate3d() 的参数必须有三个, 否则无效
      • 缩放函数, scaleX(), scaleY(), scaleZ(), 在各轴上缩放, scale(), 在两个轴上同时缩放, 只提供一个值的话, x, y 同时适用这个值. scale3d() 能同时在三个轴上缩放. 参数必须有三个, 否则无效
      • 旋转函数, rotate(), rotateX(), rotateY(), rotateZ(), 四个简单的旋转函数都只接受一个值, 即角度. 角度值以一个数字( 可正可负 ) 和一个有效的角度单位( deg, grad, rad 和 turn) 表示. 如果数字超出了相应单位的常规范围, 将化为范围内的值. 仅仅当没有使用任何形式的动画, 这样的换算才是完全等效的. 如果以动画的形式选择 1100deg, 元素将炫动几周. rotate() 函数实施的是 2D 选择, 相当于 rotateZ(). rotate3d() 前三个值指定 3D 空间中向量的 x, y 和 z分量, 第四个值是角度值, 指定绕向量旋转的量
      • 倾斜函数, skewX(), skewY(), 沿 x 轴和 (或) y轴倾斜元素. 元素不能沿 z 轴或3D空间中的向量倾斜, 绕中心点向 x 轴或 y 轴倾斜成平行四边形. skew(), skew(a,b) 的效果与 skewX(a) skewY(b) 不同, 前者通过矩阵运算 [ax, ay] 实施2D 倾斜, 提供两个值就是 x,y, 提供一个值, y为0
      • 视域函数, perspective(), 在 3D 空间中改变元素的形态时, 基本上都要赋予元素一定的视域, 视域为元素赋予前后深度, 而这深度 可以根据需要设定. 如果想在变形函数列表中设置视域值, 一定要把 perspective() 函数放在首位, 至少也要放在依赖视域的变形之前.
      • 矩阵函数, matrix() , matrix() 函数的有效值是六个以逗号分隔的数字, 不能多也不能少. matrix3d(), 以主序列排列一个4*4的齐次矩阵, 用16个值指定 3D 变形. 如果用matrix() 函数实现相同的最终状态, 也不会有滚动效果, 而是以最简短的路径到达最终状态
  3. 其他变形属性
    • 移动原点, 目前所在的变形都有个共同点, 都以元素的中心为变形的原点. 旋转元素时, 是绕着中心旋转的, 不过可以使用 transform-origin 属性修改. transform-origin, left, center, right, top, bottom, <percentage>, <length>.
      • transform-origin 属性的值为两个或三个关键字, 用于定义相对哪个点变形: 个值针对横向, 第二个值针对纵向, 可选的第三个值是 z 轴上的长度. z轴不能使用英语关键字或百分数. 百分数相对对应的轴和元素的尺寸计算, 设定是距元素左上角的偏移量.
    • 选择 3D 变形方式, 默认情况下, 不管怎样变形, 得到的结果都是扁平的. 幸好, 这个行为可以使用 transform-style 属性修改
      • transform-style, 取值 flat(默认值), preserve-3d. transform-style 设定的变形方式可能会被其他属性覆盖. 这是因为那些属性的某些值要求元素及其子元素必须以扁平的方式呈现才能起作用. 影响被覆盖的属性有, overflow: visible, filter: none, clip: auto, clip-path: none, mask-image: none, mask-border-souce: none, mix-blend-mode: normal, isolation 属性的值必须是或者计算为 isolate
    • 修改视域, 相当于前面讨论过的 perspective() 函数;
      • 定义视域, perspective, 这个属性的值是一个长度, 定义视域椎体的深度, 与 perspective() 函数功能类似, perspective 属性定义的视域深度应用到目标元素的所有子元素上, 而perspective() 函数只为目标元素定义视域. 为了让 3D 空间中的变形有视觉效果, 要把 perspective() 函数放在变形函数列表的开头或前部. 多数时候, 应该使用 perspective 属性.
      • 移动视域的原点, 视野有原点, 也称消隐点, 这个点的位置可以使用 perspective-origin 属性修改, 初始值, 50% 50%, perspective-origin 的取值句法与 transform-origin 一样, perspective-origin 定义的是视线汇聚于哪一点.
    • 处理背面
      • backface-visibility 背面处理属性, 取值, visible, hidden

3. 过渡

在一段时间内把 CSS 属性的初始化变为另一个值

  1. CSS 过渡

    • CSS 过渡能控制一段时间内属性的值如何变成另一个值. transition: color 200ms ease-out 50ms;

  2. 定义过渡的属性

    • 过渡使用四个属性定义: transition-property, transition-duration, transition-timing-function 和 transition-delay. 此外, 还有个简写属性 transition, 可一次声明全部四个属性.

    • 始态和终态可以应用不同的过渡至, 但是进入某一状态时一定会使用氮气状态定义的值

    • 限制受过渡影响的属性, transition-property 属性指定想应用过渡效果的 CSS 属性名称, 这样便可以限定只在特定的属性上应用过渡效果, 而其他属性则瞬间完成, transition-property 属性的值是以逗号分隔的属性列表; 或者是none, 表示不过渡任何属性; 还可以是默认值 all, 如果只有

      • 禁用过渡效果, 使用 transition-property: none 覆盖整个过渡声明, 禁用所有属性的过渡效果, 另一种方法是把属性的延迟和持续时间都设为 0s.
      • 过渡事件, 过渡结束后会触发 transitionend 事件. 每个支持动画的属性有各自的 transitionend 事件. transitionend 事件有三个与该事件有关的属性, 1. propertyName: 结束过渡的 CSS 属性的名称. pseudoElement: 应用过渡效果的伪元素, 前面有两个冒号, elapsedTime: 过渡持续的时间, 单位为秒; 返回的值通常是 transition-duration 属性声明的时间, 过渡中断不会触发, 返回初始值会触发.

    • 设置过渡持续时间, transition-duration, 单位为 s 或 ms, 设置了多个持续时间, 在谁的状态就用谁的. 值不能为负. 可以设置各个不同属性持续的时间, 如果恰好声明两个持续时间, 奇数位上的属性使用个持续时间, 偶数位上的属性使用第二个持续时间, 持续时间一般在 100 到 200ms 直接效果更好

    • 调整过渡的内部时序, transition-timing-function, 可取值, ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(n, start), http://easings.net 网站额外提供了很多三次方贝赛尔函数值.

      cubic-bezier() 指定一个三次方贝赛尔曲线 cubic-bezier(x1, y1, x2, y2) ease 慢速开始, 加速, 慢, 结束特别慢 cubic-bezier(0.25, 0.1, 0.25, 1) linear 整个过渡过程保持相同的速度 cubic-bezier(0, 0, 1, 1) ease-in 慢速开始, 然后加速 cubic-bezier(0.42, 0, 1, 1) ease-out 快速开始, 然后减速 cubic-bezier(0, 0, 0.58, 1) ease-in-out 与ease类似, 中间快,两边慢 cubic-bezier(0.42, 0, 0.58, 1)
      时序函数 说明 三次方贝赛尔值
      • 步进时序,
      step-start 整个过渡都处在最终关键帧上. 等同于 steps(1, start) step-end 整个过渡都处在初始关键帧上, 等同于steps(1, end) steps(n, start) 显示 n 个固定镜头, 其中个固定镜头占整个过渡的百分之 n steps(n, end) 显示 n 个固定镜头, 前百分之 n 的时间出于初始值状态
      时序函数 定义

    • 延迟过渡, transition-delay 属性, 可以为负, 只设置两个值, 和持续时间一样. 我们可以做些数学运算, 为每个过渡的属性设置不同的持续时间和延迟, 但是确保所有过渡在同一时间结束. 在某种程度上, 50ms 的延迟能防止导航菜单意外展开,

      • 负的延迟值, 如果 transition-delay 的值为负数, 而且值比 transition-duration的值小, 从中间某个位置立即开始过渡, 值大的话, 将瞬间变化. 不触发 transitionend 事件

    • transition 简写属性, 一个时间表示持续时间, 两个表示持续时间和延迟时间.

      div{
    transition-property: color, border-width, border-color, border-radius, transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms,180ms, 160ms, 140ms, 120ms, 100ms 1s, 2s, 3;
    transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear, step-end, step-start, steps(5, start), steps(3, end);
    transition-delay: 0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s, 1.2s, 1.4s, 1.6s;
}

div{
    transition:
        color 200ms,
        border-width 180ms ease-in 200ms,
        border-color 160ms ease-out 400ms,
        border-radius 140ms ease-in-out 600ms,
        transform 120ms linear 800ms,
        opacity 100ms step-end 1s,
        box-shadow 1s step-start 1.2s,
        width 2s steps(5, start) 1.4s,
        padding 3s steps(3, end) 1.6s;
}

  3. 反向过渡: 退回起点

    • 逆转中断的过渡, 如果过渡还没结束就被打断了, 属性的值将还原为过渡开始前的值

      Chrome 有 200ms 0.200s Safari 有 200ms 0.200s Firefox 有 38ms 0.038s Opera 有 200ms 0.250s Edge 无 38ms 0.038s
      浏览器 逆转延迟 过渡时间 实耗时间

      若想覆盖这些值, 在始态和终态中都要声明过渡属性, 这对逆向缩减机制虽然没有影响, 但能进一步控制.

  4. 支持动画的属性和值

    • 判断属性是否支持动画的关键是确定其取值能否内插.
    • 属性值是如何内插的, 数字以浮点数内插, 整数以自然数内插, 以自然数的形式递减或递增
    • 内插重复的值, 复制到数目对应为止, 只有可内插的值才能出发 transitionend.

  5. 过渡是效果增强

  6. 打印过渡


4. 动画

过渡, 属性的始态和终态值由规则中设定的属性值确定, 但是对时间段内值的变化方式没有多少控制权, 动画能做到中间的控制.

  1. 定义关键帧

    • 动画的一般结构

      @keyframes animation_identifier{
    keyframe_selector{
        property: value;
        property: value;
    }
    keyframe_selector{
        property: value;
        property: value;
    }
}

      keyframe_selector 有两种, 一种是 from 和 to, 一种是 0% 到

  2. 设置关键帧动画

    • 为动画命名, 名称必须是表示符

  3. 关键帧选择器

    • 有 from 和 to, 有 0% 到
    • 省略 from 和 to 值, 浏览器会虚构, form to, 0%, , 百分数可以为小数
    • 重复关键帧属性, 后一个重复元素会覆盖前面的元素
    • 支持动画的属性,
    • 不支持动画但不被忽略的属性, visibility 和 animation-timing-function
    • 通过脚本编辑 @keyframes 动画
      • appendRule(n), deleteRule(n), n 是关键帧的完整选择符. 关键帧的内容可以通过findRule(n) 获取. 删除的最后一个选择符
      • 动画有三个事件, animationstart, animationend 和 animationiteration.

  4. 把动画应用到元素上

    • 在元素上声明动画属性的方式有两种: 一种是单独声明各种属性, 另一种是使用 animation 简写属性一次性声明全部属性.

    • 指定动画的名称, animation-name, div{animation-name: a1, a2, w;}, 有不存在的会忽略. 如果动画中有重复的属性, 后面的动画会覆盖前面的动画.

    • 定义动画的时长, animation-duration, 单位为秒或毫秒, 有无效的时间, 比如负数, 没带单位, 整个都无效, 一般来说, name 有多少, duration 就有多少. 不对应也没关系, 可以复制和忽略

    • 声明动画的迭代次数, animation-iteration-count, 希望结束后的动作, 动画默认播放一次, 给数字迭代指定次数, 任何数字或关键字 infinite, 设为 0 时, 动画依然播放, 只不过迭代 0 次, 这也会触发 animationstart 和 animationend 事件

    • 设置动画的播放方向, animation-direction, 取值, normal(默认), reverse(逆序), alternate(交替), alternate-reverse(交替, 次是逆序)

    • 延时播放动画, animation-delay, 定义浏览器把动画附加到元素上之后等待多久开始次迭代. 单位为秒或毫秒, 负的延迟是动画在中途立即开始播放

    • 动画事件, animationstart, animationiteration 和 animationend. 每个事件都有三个只读属性: animationName, elapsedTime 和 pseudoElement, 在所有浏览器中都无需使用前缀.

      • animationstart 在动画开始播放时触发; 如有延迟, 等 animation-delay 设定的时间过后触发; 否则立即触发. 如果 animation-delay 为负值, animationstart 事件立即触发;
      • animationend 事件在动画播放结束时触发, 如果 animation-iteration-count 为 infinite, 而且 animaiton-duration 设定的时间大于 0 , animationend 事件永不触发. 如果把 animaiton-duration设成0秒, 或者默认, animationstart 和 animationend 事件基本上同时触发.
      • animationiteration 事件在两次迭代之间触发. 迭代结束后动画也结束的话, 触发animationend 事件.
      • 可以利用 animation-delay 属性把多个动画串在一起, 让下一个动画在前一个动画结束后立刻开始
      .raibox{
    animation-name: red, orange, yellow, blue, green;
    animation-duration: 1s, 3s, 5s, 7s, 11s;
    animation-delay: 3s, 4s, 7s, 12s, 19s;
}
      • 如果想让一组列表元素按顺序播放动画, 各列表元素的 animation-delay 值要等于前一个动画的 animation-duration 和 animation-delay 值之和.
      • 为了提升性能, 只要可能, 就应该把 transform 和 opacity 放在动画中, 而 top, left, bottom, right 和 visibility 则不要这么做
      • 使用 javascript, 监听 animationend 事件启动后续动画, 从而实现动画链. 在播放动画的过程中改变动画属性的值对动画没有影响, 但是删除或增加 animation-name 声明却有影响. 此外, 在元素上设置display: none 将终止动画. 把 display 改成元素可见的值, 动画将从头开始播放.
      • 延迟动画中的迭代, 若想在迭代之间添加不同的延迟, 可以创建一个动画, 实现三种不同的延迟, 有一种方法适用于多数浏览器, 而且动画规范也提到了: 多次应用同一个动画, 每次设置不同的 animation-delay 值. 模拟animation-iteration-delay 属性最安全, 最可靠, 也是跨浏览器支持更好的方法是使用动画事件, 触发 animationend 事件, 从元素上拆离动画, 等到迭代延迟结束后再重新附加. 如果迭代之间的延迟都相等, 可以使用 setInterval, 如果不同, 使用 setTimeout

    • 改变动画的内部时序, animation-timing-function, 取值, ease(默认值), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps, cubic-bizer;

      • 步进时序函数, step-start, step-end 和 steps(), steps() 时序动画把动画分成一系列等长的步幅. steps() 接受两个参数: 步数和变化点.

      • 以动画形式改变时序函数, animation-timing-function 属性不支持动画, 但是可以放在关键帧中, 修改动画的当前时序. 在某个关键帧中设定的 animation-timing-function, 只应用到那个关键帧中定义的属性上. 模拟小球的摩擦力

        @keyframes bounce{
    0%{
        transform: translateY(0);
        animation-timing-function: ease-in;
    }
    30%{
        transform: translateY(100px);
        animation-timing-function: ease-in;
    }
    58%{
        transform: translateY(200px);
        animation-timing-function: ease-in;
    }
    80%{
        transform: translateY(300px);
        animation-timing-function: ease-in;
    }
    95%{
        transform: translateY(360px);
        animation-timing-function: ease-in;
    }
    15%, 45%, 71%, 89%, {
        transform: translateY(380px);
        animation-timing-function: ease-out;
    }
}

    • 设置动画的播放状态, 使用 animation-play-state, 取值 running, paused, 在运行和延迟时暂停, 时间都停止

    • 动画的填充模式, animation-fill-mode 属性定义动画播放结束后是否应用原来的值, 取值, none(默认值), forwards, backwards, both

      • 设为 backwards 时, 0% 或 form 关键帧 (如果有的话) 中定义的属性值在动画应用到元素上的那一刻就起作用.
      • forwards 值的意思是动画播放结束后, 即 animation-iteration-count 设定的迭代次数全部结束, 触发了 animationend 事件, 当前的属性值继续应用在元素上.
      • both 值包含 backwards 和 forward 两个值的效果, 即把动画附加到元素上之后立即应用属性值, 而且触发animationend 事件之后, 属性的值得以保留.

  5. 写为一个属性

    • animation 简写, 0是ease0是1 normal none running none.

      #animated{
    animation: 200ms ease-in 50ms 1 normal running forwards slidedown;
}
#animated{
    animation-name: slidedown;
    animation-duration: 200ms;
    animation-timing-function: ease-in;
    animation-delay: 50ms;
    aniamtion-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-play-state: running;
}

  6. 动画, 特指度和优先顺序

    • 特指度和 !important, 不要在动画声明块中使用 !important. 这样做是无效的, 反而会导致相应的属性和值被忽略
    • 动画顺序, 如果有多个动画为同一个属性指定了不同的值, 最后一个应用的动画将覆盖之前动画中声明的值
    • display: none; 对动画迭代的影响, 如果把元素的 display 属性设为 none, 元素或其后代上的动画迭代将停止, 好似把动画从元素上拆离了一样, 把 display 属性变为某个可见的值之后, 所有动画属性重新应用到元素上, 动画将从头开始播放:
    • 动画和 UI 线程. CSS 动画在用户界面 (UI) 线程中的优先级更低. 如果页面加载时附加了多个动画, 而且 animation-delay 为正值, 延迟结束后倘若 UI 线程不可用, 动画不会播放

  7. 癫痫和前庭功能失调

    • 视觉变化, 尤其是快速的视觉变化, 可能导致癫痫病人发作. 此外, 还有可能导致前庭功能失调(晕动病) 人群产生多种不适. 浏览器新增了一个媒体查询: prefers-reduced-motion

  8. 动画事件及其前缀

    • animationstart, animationstart 事件在动画开始时触发. 如果动画有延迟, 延迟结束后才触发了这个时间, 如果没有延迟, animationstart 事件仍然触发. 如果一个元素上应用了多个动画, 每个有效的关键帧动画都将会触发一次 animationstart 事件.
    • animationend, animationend 事件在动画结束时触发
    • animationiteration 事件在动画的一次迭代结束之后和下一次迭代开始之前触发, 如果没有迭代, 或者迭代次数小于或等于1, animationiteration 事件不触发. 主要取决于迭代次数

5. 滤镜, 混合, 裁剪和遮罩

创作人员可以使用视觉滤镜调整元素的外观, 以不同的方式与背后的内容混合

  1. CSS滤镜

    • filter, 取值, none(默认), blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), sepia(), saturate(), url(); 任何 HTML 元素都可以使用滤镜
    • 基本滤镜
      • blur(<length>), 使用高斯模糊对元素的内容做模糊处理, 标准偏差由 lenght 值定义, 不能为负
      • opacity, 把透明度滤镜应用到元素上, 0和1, 0%到. 大于1或 取整
      • drop-shadow, 创建与元素的 alpha 通道形状一致的投影, 带模糊效果, 而且可以指定颜色. 长度和颜色的处理方式与 box-shadow 属性一样, 在透明图片上有效果
    • 颜色滤镜, 不能为负值
      • grayscale, 把元素的颜色变成指定的灰阶.0-1, 0%-
      • sepia, 把元素的原色变成指定额墨色调 #704214
      • invert, 把元素所有的颜色做反相处理. 值为0.5或50%, 得到均匀的灰色
      • hue-rotate, 在色轮上旋转色相, 而饱和度和明度保持不变
    • 亮度, 对比度和饱和度
      • 这些 filter 函数也用于操控颜色, 而且操控的方式有很大的关联性
      • brightness, 调整元素上颜色的亮度
      • contrast, 调整元素上颜色的对比度
      • saturate, 调整元素上颜色的饱和度
    • svg 滤镜
      • url(<uri>)

  2. 合成和混合

    • 混合元素, min-blend-mode, 取值, normal(默认值), multiply, screen, overlay, darken, lighten, color-dodge, color-burn,hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity .
      • 应用 mix-blend-mode 属性的元素是前景
      • 位于元素背后的是背着物. 可以是另一个元素, 也可以是父元素的背景等
      • 像素分量 (pixelcomponent) 是某个像素的颜色分量
    • 变亮, 变暗, 插值和排除
      • darken, 前景中的每个像素和背着物中相应位置上的像素比较, 比较 R, G 和 B 的值, 保留较小的值.
      • lighten, 与darken相反.
      • difference, 取两者之差的值
      • exclusion, 是 difference 的温和版本, 所用公式不是 |back-fore|, 而是 back+fore-(2*back*fore), back 和 fore 是0-1的数
    • 正片叠低, 滤色和叠加
      • multiply, 前景中的每个像素分量与背对无中对应位置上的像素分量相乘
      • screen, 对前景和背着物中同一位置上的像素分量做反相处理, 相乘后再反相. 与multiply一样, screen 是对称的
      • overlay, 这个混合模式是对 multiply 和 screen 的综合应用. 如果前景中的像素分量比 0.5 暗, 执行multiply 操作, 如果大于0.5, 则使用 screen.
    • 强光和柔光
      • hard-light, 这个混合模式的作用与 overlay 相反.
      • soft-light, 这个混合模式是 hard-light 的柔和版本, 执行的操作时相同的, 只不过效果有所缓和. 雾的效果
    • 颜色减淡和加深
      • color-dodge, 前景中的各像素分量做反相处理, 再拿背着物中对应的像素分量除以反相后的前景值, 得到的结果是背着物变得更亮
      • color-burn, 这个混合模式与 color-dodge 的作用相反
    • 色相, 饱和度, 明度和颜色
      • hue, 把背着物中每一像素的明饱和度与前景中对应像素的色相角度合并
      • saturation, 把背着物中每一像素的色相角度和明度与前景中对应像素的饱和度合并
      • color, 把背着物中每一像素的明度与前景中对应像素的色相角度和饱和度合并
      • luminosity, 把背着物中每一像素的色相角度和饱和度与前景中对应像素的明度合并
      • 元素始终与背着物混合在一起. 如果背后是其他元素, 就与背后的元素混合; 如果背后是父元素的背景, 则与父元素的背景混合
      • 改变混合后元素的不透明度将对结果产生影响, 但是影响的方式可能与你想的不一样

  3. 与背景混合

    • 如果一个元素有多个背景图, 而且背景图有重叠, 此时就要用到 background-blend-mode 属性了, background-blend-mode, 取值, normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity
    • 区别在于, 把多个背景图混合在一起时, 各背景图是与一个空的背景在合并, 即一个完全透明, 没有颜色的背着物.
      • 独立混合, isolation, 取值, auto, isolate. 这个属性的作用: 指明是否为元素定义独立的混合上下文.
      • 特别注意 isolation 和 min-blend-mode 是应用在哪个元素上的. 但有个例外, 建立堆叠上下文的元素自动独立出来, 而不管 isolation 属性为什么值.

  4. 裁剪和遮罩

    • 裁剪, clip-path, 取值, <url>, inset(), circle(), ellipse(), polygon(), pader-box, padding-box, content-box, margin-box, fill-box, stroke-box, view-box. 作用是定义裁剪形状
    • 裁剪形状
      • inset(), 值为一到四个长度值或百分数, 定义距范围框各边的偏移量. 可以使用 round 关键字, 或者另一组一到四个字或百分数定义圆角
      • circle(), 只接受一个值, 为长度, 百分数或关键值, 定义圆的半径. 在一或两个长度或百分数后可以使用 at 关键字指定圆心的位置
      • ellipse(), 值必须为两个长度, 百分数或关键字, 定义椭圆在纵轴和横轴上的半径, 在一或两个长度或百分数后可以使用 at 关键字指定椭圆中心的位置
      • polygon(), 一系列以逗号分隔的 x 和 y 坐标指, 在坐标值前面可用关键字定义多边形的填充规则.
    • 裁剪框, 裁剪框不使用长度或百分数指定. 多数时候, 裁剪框直接对应于盒模型中的边界.
      • view-box, 使用最近的 SVG 视区 (即最近的祖辈) 作为裁剪框
      • fill-box, 使用对象范围框作为裁剪框.
      • stroke-box, 使用描边范围框作为裁剪框.
    • 裁剪填充规则, 这个行为由 clip-rule 属性控制, 取值 nonzero(初始值), evenodd, 很多不支持

  5. 蒙版

    • 蒙版的意思是, 位于形状内部的内容可见, 而在形状外部的内容不可见

    • 定义蒙版, mask-image, 取值, none, <image>, <mask-source>, 使用 img.masked{mask-image: url(theatre-masks.svg);}

      定义蒙版

      <svg viewbox="0 0 100 100" height="100" width="100"
	xmlns="http://www.w3.org/2000/svg" version="1.1">
	<mask id="hexlike">
		<path fill="#FF0000" d="M 50,0 100,25 100,75 50,100 0,75 0,25"/>
	</mask>
</svg>

.masked{mask-image: url(#hexlike);} /*内部应用*/
.masked{mask-image: url(masks.svg#hexlike);}

    • 改变蒙版的模式, mask-mode, 取值, alpha, luminance, match-source(初始值), luminance使用亮度值计算蒙版.. 初始值是 alpha 和 luminance 的结合体

    • 调整蒙版的尺寸和重复方式, mask-size, 取值, cover, contain, <length>, <percentage>, 重复模式, mask-repeat, 取值, repeat-x, repeat-y, repeat, space, round, no-repeat

    • 定位蒙版 mask-position, 定位蒙版, mask-origin, 取值, content-box, padding-box, border-box, margin-box, fill-box, stroke-box, view-box

    • 裁剪和合成蒙版, mask-clip. 对背景而言, 对应的属性是 background-clip, 取值, content-box, padding-box, border-box(默认), margin-box, fill-box, stroke-box, view-box, no-clip

    • 最后一个蒙版属性 mask-composite 相当有趣, 他能从根本上改变多个蒙版的合成方式. mask-composite, 取值, add, subtract, intersect, exclude

    • 写为一个属性

      #example{
    mask-image: url(circle.svg), url(square.png), url(triangle.gif);
    mask-repeat: repeat-y, no-repeat;
    mask-position: top right, center, 25% 67%;
    mask-composite: subtract, add, add;
    mask-size: auto, 50% 33%, contain;
}

#example{
    mask:
        url(circle.svg) repeat-y top right / auto subtract,
        url(square.png) no-repeat center / 50% 33% add,
        url(triangle.gif) repeat-y 25% 67% / contain add;
}

    • 蒙版类型, mask-type, 取值, luminance, alpha, 与 mask-mode 十分相似, 但是不支持 match-source值. mask-mode优先级更高

    • 遮罩边框图像, 没有浏览器支持

      • mask-border-source, 指向一个图像, 用作蒙版
      • mask-border-slice, 定义如何裁切原图
      • mask-border-width, 定义元素四周边框区域的具体宽度
      • mask-boder-outset, 定义与元素的默认边框相距一段距离的位置
      • mask-border-repeat, 设定原图的切片未完全占满边框区域时采用何种重复模式
      • mask-border-mode, 声明使用 alpha 蒙版模式还是明度蒙版模式
      • mask-border, 简写属性, 涵盖前面各个属性

  6. 对象填充和定位

    • 还有一种遮罩只适用于之后元素, 例如图像. 使用 object-fit 属性可以改变置换元素在元素框中填充的方式, 或者并不完全填满元素框.
      • object-fit, 取值, fill(默认), contain, cover, scale-down(与none或contain相同), none.
      • object-positon, 默认50%, 50% 置换元素比元素框大或小的对齐方式, 溢出的将被裁剪

6. 针对特定媒体的样式

CSS 提供了数种工具, 以便针对特定的媒体或具有特定功能的媒体应用样式

  1. 定义针对特定媒体的样式

    • 基本的媒体查询

      <link rel="stylesheet" type="text/css" media="screen, speech"
      href="visual.css">

      @import url(visual.css) screen;
@import url(outloud.css) speech;
@import url(article-print.css) print;

@media screen{
	body{}
}
@media print{
    body{}
}
      • all 所有能呈现内容的媒体
      • print 打印给非盲用户看的文档, 或者是文档的打印预览
      • screen 呈现文档的屏幕媒体, 例如桌上电脑的显示器或手持设备
      • speech 语言合成器, 屏幕阅读器或其他音频渲染设备

    • 复杂的媒体查询

      • and 把两个或更多的媒体特性连在一起, 每一个特性的结果都必须为 true, 整个查询的结果才是 true

      • not 对整个查询的结果取反, 如果所有条件都满足, 不应用样式表. not 关键字只能在媒体查询的开头使用.

      • only 在不支持媒体查询的旧浏览器中隐藏样式表

      • 媒体特性描述符, 而且特性描述符必须放在圆括号中, width, min-width, max-width, height, min-height, max-height, device-width, min-device-width, max-device-width, device-height, min-device-height, max-device-height, aspect-ratio, min-aspect-ratio, max-aspect-ratio, divice-aspect-ratio, min-divice-aspect-ratio, max-divice-aspect-ratio, color, min-color, max-color, color-index, min-color-index, max-color-index, monochrome, min-monochrome, max-monochrome, resolution, min-resolution, max-resolution, orientation, scan, grid.

      • 新值类型, <ratio>, <resolution>

      • 响应式设计

        /*通用样式*/
@media (max-width: 400px){
    /*这是针对小屏设备的样式*/
}
@media (min-width: 401px) and (max-width: 1000px){
    /*这是针对中屏设备的样式*/
}
@media (min-width: 1001px){
    /*这是针对大屏设备的样式*/
}

  2. 分页媒体

    • 分页媒体指使用一系列单独的 "页面" 呈现文档的媒体
    • 屏幕与印刷品的区别, 无衬线字体最适合屏幕设计, 而衬线字体在印刷品上可读性更好, 在web 中千万别使用点数
    • 定义页面尺寸. 页面区域, 外边距区域, 页面框, @page 中设置, size 属性用于定义页面框的具体尺寸, @page{size: 7.5in 10in; margin: 0.5in;}
    • 选择页面类型 @page normal 或 @page rotate
    • 分页, page-break-before, page-break-after, 或 page-break-inside
    • 孤行和寡行, windows, orphans
上一篇：每日CSS _ neon按钮悬停效果 下一篇：嵌套CSS的三个主要功能和权重
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！