a标签的伪类选择器

a标签的伪类选择器(用来修改a标签的不同状态的样式的)

格式

• :link(从未被访问过)
• :visited(被访问过)
• :hover(监听鼠标悬停状态\不只可以用于a标签,还可用于其他标签)
• :active(鼠标长按状态)

注意点

• 以上属性同时出现时,必须严格按照以上从上至下进行("爱恨原则")
• :link与:visited属性赋值相同时,可简写,直接给a标签中的color属性赋值(a{color=XXX})

过渡模块的使用

例如:

• transition-property:witch,background-color;(不是直接写在hover里)
• transition-duration:5s,5s;
• transition-timing-function(linear/ease/ease-in/ease-out/____控制速度)
• transition-deley
• 连写: transition:过度属性 过渡时长 运动速度 延迟时间(多个属性用逗号隔开)
  +tips:
  连写时可省略后面两个属性
  如果多个属性运动的速度/延迟的时间/持续的时间都一样,可简写:transition:all 5s;

总结

编写过渡套路

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

注意区别:

 ul:hover li{
            width: 100px;
        }
 ul li:hover{
            width: 460px;
()

2D转换模块

• transform:rotate(45deg);_________旋转
• transform:translate(50px,0px);_______平移
• transform:scale(1.5,1);________缩放
  如果进行多次转换,中间用空格(不是逗号!)隔开

形变中心点

• transform-origin:(可接受像素/百分比/特殊关键词三种取值)

旋转轴向

• transform:rotateY(45deg);

透视

• perspective:500px;__________近大远小 (要添加到他的父元素上)

盒子阴影和文字阴影

1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

2.注意点
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致

3.如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;