第十九章 过渡模块

  
    
    
    
  
  
    

    

    

    

    

    

      
![](../image/o.gif)
      
![](../image/o.gif)
      
![](../image/o.gif)
      
![](../image/o.gif)
      
![](../image/o.gif)
    
  

第158课 a标签伪类选择器

1、通过我们的观察，发现a标签存在一定的状态

a、默认状态，从未被访问过
b、被访问过的状态
c、鼠标长按状态
d、鼠标悬停在a标签上状态

2、什么是a标签的伪类选择器

a标签的伪类选择器是专门用来修改a标签不同状态的样式的

3、格式

:link 修改默认状态，从未被访问过下的样式
:visited 修改被访问过的状态下的样式
:active 修改鼠标长按状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式

第159课 a标签伪类选择器注意点

1、a标签的伪类选择器可以单独出现，也可一起出现
2、如果a标签的伪类选择器如果一起出现，
那么有严格的顺序要求编写的顺序link visited hover active，
否则有可能失效
3、如果默认状态的样式和被访问的过状态的样式一样，可以使用
a{
color:red;
}
代替定义两个伪选择器分别定义样式。

第160课 a标签伪类选择器-练习

1、在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
2、在企业开发中和a标签盒子有关的属性都写在标签选择器中（显示模式／宽高度／padding／margin）
3、在企业开发中和a标签文字／背景相关的都写在伪类选择器中

第161课 过渡模块基本使用

:hover 悬停 这个伪类选择器可以使用在任何标签上

过渡 transition 三要素

1、必须要有属性发生变化
2、必须告诉系统哪个属性需要执行过渡效果
3、必须告诉系统过渡效果持续的时长

注意点

当多个属性需要同时执行过渡效果时用逗号隔开即可
transiton-property:width, background-color;
transtion-duration:5s, 5s;

第162课 过渡模块-其他属性

transtion-delay:2s;告诉系统延迟多少秒之后才开始过渡动画
transition-timing-function: ease; 告诉系统过渡动画的运动的运动速度变化

linear 均速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

第163课 过渡模块-连写

transition: property duration timing-function delay;

注意点

1、如果想给 加过渡效果，只需要用逗号隔开即可
transition: property duration timing-function delay,property duration timing-function delay;
2、连写的时候，可以省略timing-function delay，因为已经满足过渡三要素
3、如果多个属性的运动速度／延迟的时间／持续时间都一样，
那么可以简写为transition:all 5s;

第164课 过渡模块-弹性效果

编写过渡套路

1、不要管过渡，先编写基本的界面
2、修改我们认为需要修改的属性
3、再回头去给被修改属性的那个元素添加过渡即可

第165课 过渡模块-手风琴效果

ul:hover li {
width: 140px;
}
ul li:hover {
width: 400px;
}

就近原则：谁离元素关系越近，谁就管用