17、过滤模块

a标签的伪类

通过页面的观察 我们发现a标签存在一定的状态

1.默认状态，未访问（:link）

2.访问后的状态（:visited）

3.鼠标按住未释放的状态（:active）

4.鼠标悬浮的状态（:hover）

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

格式：

a:link{设置 默认状态未访问 时候的样式}

a:visited{设置 访问后的样式}

a:active{设置 鼠标按住未释放的样式}

a:hover{设置 鼠标悬浮的样式}

注意：1多个a标签伪类选择器可以一起出现，当一起出现时 注意顺序

【link visited hover active】

2 :hover 这个伪类选择器 除了可以用在a标签上 还可以用在其他标签上

【hover只能改变自己 后自己下面的元素】

过渡模块

作用：实现过渡的效果

注意：过渡的三要素

1必须有属性发生变化

2必须告诉系统哪个属性 需要执行过渡效果

transition-property:属性

3必须告诉系统过渡的持续时间

transition-duration：持续时间 s;

过渡的其他属性：

transition-delay:执行过渡效果等的待时间 s;

transition-timing-function:模式； 以哪种模式过渡

模式的取值：1.linear 匀速

2.ease 逐渐变慢 【默认】

3.ease-in 逐渐变快

4.ease-out 减速

5.ease-in-out 先快后慢

注意：想给多个属性添加过渡效果，可【transition-property:过渡属性1,过渡属性2;】 属性之间逗号隔开

过渡模块的简写：

transition：需要过渡的属性 过渡的时间 过渡的模式 延迟时间；

注意：1连写是可以省略后面两个参数，因为编写了前面两个参数就满足了 过渡三要素了

2多个属性同时需要过渡的简写，可【transition:width 5s ,background-color 5s ;】

3如果很多的属性都需要过渡，且过渡的时间/延迟/模式/都一样可以简写为【transition:all 执行时间s；】

企业开发过渡效果的套路

1.先不要管过渡，先编写基本的页面

2.修改我们认为 需要变动的属性

3.再去给变动的元素 添加过渡效果