美文网首页h5
a标签伪类选择器和过度模块

a标签伪类选择器和过度模块

作者: 白的吓人 | 来源:发表于2017-01-09 20:24 被阅读0次

    1.有状态

    修改a标签不同状态的样式

    a:link{} 修改从未被访问过状态下的样式

    a:visited{} 修改被访问过状态下的样式

    a:hover{} 修改鼠标悬停在a标签上状态下的样式

    a:active{} 修改鼠标长按状态下的样式注意点:

    1、a标签的伪类选择器可以单独出现也可以同时一起出现

    2、a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写顺序必须要遵守爱恨原则 love hate

                         l(link)ov(visited)e  h(hover)a(active)te

    3、如果默认状态的样式和被访问过状态的样式一样,那么可以缩写  a:link{color:green;}  a:visited{color:green;}                     

                   ------>可简写为    a{color:green;}伪类选择器练习ul>(li>a)*5  快速创建按住tab键

    1.在实际开发中编写a标签的伪类选择器最好写在标签选择器的后面

    2.在实际开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)

    3.在实际开发中和a标签文字/背景相关的都写在伪类选择器中

    过度模块

    :hover这个还可以用在其他的任何标签上

    transition-property:width;  告诉系统哪个属性需要执行过度效果

    transition-duration:5s;告诉系统过度效果持续的时长

    过渡三要素 1、必须要有属性发生变化

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

    3、必须告诉系统过渡效果持续时长

    注意点:当多个属性需要同时执行过渡效果时用逗号隔开即可

    其它属性

    transition-delay:2s;告诉系统延迟多少秒之后才开始过度动画

    transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out  告诉系统过渡动画的运动的速度

    linear:匀速

    ease:逐渐慢下来

    ease-in:加速

    ease-out:减速

    ease-in-out:先加速后减速

    连写

    transition:property(过渡属性) duration(过渡时长) timing-function(运动速度) delay(延迟时间);

    连写注意点:

    1、多个属性要过渡时用,隔开

    transition:property duration timing-function delay,property duration timing-function delay;

    2、连写的时候可以省略后面的2个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素。

    3、如果多个属性运动的速度/延迟时间/持续时间都一样,那么可以简写为

    transition:all 0s;

    改变margin 水平方向的值可以实现弹簧效果

    修改了谁的属性 就在谁里面添加过渡

    编写过渡套路:1、不要管过渡,先编写基本的界面。

    2、修改我们认为需要修改的属性。

    3、再回过头去给被修改属性的哪个元素添加过渡即可。

    谁更具体 谁的优先级更高

    相关文章

      网友评论

        本文标题:a标签伪类选择器和过度模块

        本文链接:https://www.haomeiwen.com/subject/swvhbttx.html