transition 属性实现过渡效果

• transition 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
  • 2个属性：property name | duration，比如all .2s
  • 3个属性：
    • property name | duration | delay，比如all .2s 1s
    • property name | duration | timing function,比如all .2s ease-in
  • 4个属性：property name | duration | timing function | delay，比如all .2s ease-in 1s
• 默认值：all 0 ease 0
• transition 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
• 注意：一定要设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
• transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
  • 比如transition: margin-right 4s, color 1s
• MDN 关于transition 属性
• 例子：在“百度前端技术学院 第七天学习笔记（CSS position）”的“例子3”中。
• 语法：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  /* 1个 CSS 属性的过渡效果 */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* 2个 CSS 属性的过渡效果 */ transition: margin-right 4s, color 1s; /* 所有 CSS 属性的过渡效果 */ transition: all 0.5s ease-out; /* Global values */ transition: inherit; transition: initial; transition: unset;

transition-property属性规定设置过渡效果的 CSS 属性的名称

• transition-property属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
• 提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
• MDN 关于transition-property属性

transition-duration属性指定过渡效果时长

• transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。不接受负值。
• 可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。
• 如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
• 注意：这是一个实验中的功能。
  此功能某些浏览器尚在开发中，请参考MDN中浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
• MDN 关于transition-duration属性

transition-timing-function 属性规定速度效果的速度曲线

• 该属性允许过渡效果随着时间来改变其速度。
• 可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.
• 如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。

• 注意：这是一个实验中的功能。
  此功能某些浏览器尚在开发中，请参考MDN中浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
• MDN 关于transition-timing-function 属性

transition-delay属性定义过渡效果何时开始

• transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
• 属性值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
• 可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property）
• 注意：这是一个实验中的功能。
  此功能某些浏览器尚在开发中，请参考MDN中浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
• MDN 关于transition-delay属性

使用场景

• 在工作中，完成一个文字在鼠标移入时显示方框并提供删除图标，需要在移入=》显示方框加上一个过渡效果
• 例子：

  1 2 3

  <div class="sort-cell" > <span>审核时间</span> </div>

  1 2 3 4 5 6 7 8 9

  .sort-cell { cursor: pointer; border: 2px solid transparent; // content-box，加上透明边框占位置 &:hover { // hover显示边框，边框从无到有的过渡动画 transition: all .15s linear; border-radius: 6px; border: 2px solid #0077FF; } }

  

背景，边框，列表，链接相关属性

背景相关属性

background简写：

边框相关属性

前三个属性可简写border属性：

列表相关属性

可以在 <ul> 或 <ol> 或<li>元素上简写list-style：

链接相关属性

选择器四种状态：**(他们不是属性！)**

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

注意：

• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后

举例：

1

a:link {color:#FF0000;}	

属性

CSS 各种选择器的概念，使用方法及使用场景。

简单选择器

• ID选择器：#ID名称{属性：值;}
• 类选择器：.类名称{属性：值;}
• 标签（元素）选择器：html元素名{属性：值;}
• 通用选择器：*{属性：值;}

属性选择器

• 属性选择器：[属性名]{CSS样式}
• 属性和值选择器：[属性名=值]{CSS样式}
• 属性和（多个）值选择器(类似模糊查找)：

伪类选择器

• :first-child表示一组同级元素中的第一元素
• :last-child表示一组同级元素中的最后一个元素
• :only-child表示没有任何兄弟姐妹的元素
• :invalid设置值无效时的样式

伪元素选择器

• 注意：使用双冒号，与伪类选择器区分开。
• ::first-line伪元素设置文本首行的特殊样式
• ::first-letter 伪元素设置文本首字母的特殊样式
• ::before伪元素在元素前面插入新内容

派生选择器

• 用于选择一个标签中的所有另一个标签。（id选择器与类选择器、属性选择器也可以派生）
• 用空格分隔开两个元素名称。

后代选择器

• 空格分隔两个选择器名称
• 选择的元素是其选择器的后代。他们不需要是直接子元素就可以配对(子孙后代都可以)。

儿童组合器

• 大于号分隔
• 仅当选择器选择直接子元素时才匹配。层次结构后面的子孙不匹配。（注意：直接子元素并不是一定只有一个，要与伪类选择器:first-child区别开来）

直接相邻的同级选择器

• 加号分隔
• 用于选择与层次结构中相同级别的另一个元素相邻的对象。
• 注意：这两个选择器不仅要是同级别的，还要直接相邻。

一般同级[所有的同级选择器]

• 用**~分隔**开两个选择器。
• 用于选择与层次结构中相同级别的所有指定选择器的对象（包括直接相邻的同级），也可以使用常规的同级组合器。
• 注意：空格分隔开的是父元素与子元素组成的后代选择器，~分隔开的是同级别的所有指定选择器的对象。

CSS 选择器的优先级

• 影响优先级的因素从高到低的顺序是：重要性、特异性、源顺序。
• 注意：并不是整个规则都会被覆盖，只是相同的属性。

源顺序（靠后的获胜）

如果有多个选择器作用于同一个元素，则靠后的将获胜。

特异性(计算各个选择器的特异性值)

• 选择器具有的特异性程度是使用四个不同的值（或成分）来衡量的，可以将其视为千位，百位，十位和个位这四列中的四个个位数：

重要性!important

• 超越了上述两个级联的常规规则，但最好不要用。
• 语法选择器{属性: 属性值 !important;}