过滤模块

南京极客营2021-02-21 14:35:29

▲点击关注~南京极客营▲

▷改变从此刻开始◁



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.再去给变动的元素 添加过渡效果


本文转自南京极客营java讲师伍传琴老师的博客

链接:https://blog.csdn.net/qq_38728790/article/details/79143546


南京极客营助你成就IT人生!

扫描下方二维码加入我们的极客大家庭吧!!!