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: 水平偏移 垂直偏移 模糊度 阴影颜色 ;
