文章目录
1. CSS现状
1. 浏览器支持程度差,需要添加私有前缀 2. 移动端支持由于PC端 3. 不断改进中 4. 应用相对广泛 |
2. 属性选择器
选择符 | 简介 |
---|---|
E[att] | 选择具有att属性的E元素 |
E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
E[att^=“val”] | 匹配具有att属性、且值以val开头的E元素 |
E[att$=“val”] | 匹配具有att属性、且值以val结尾的E元素 |
E[att*=“val”] | 匹配具有att属性、且值中含有val的E元素 |
3. 结构伪类选择器
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
nth-child(n) 注意事项:
- n可以是数字,关键字和公式
- n如果是数字,就是选择第n个
- 常见的关键词 even 偶数 odd 奇数
- 常见的公式如下 ( 如果n是公式,则从0开始计算)
- 但是 第0个元素或者超出了元素的个数会被忽略 )
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 … |
n+5 | 从第5个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第5个)… |
4. 伪元素选择器
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- before 和 after 必须有 content 属性
- before 在内容的前面,after 在内容的后面
- before 和 after 创建一个元素,但是属于行内元素。
- 因为在 dom 里面看不见刚才创建的元素,所以我们称为伪元素
- 伪元素和标签选择器一样,权重为 1
5. 2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,变形,缩放。
名称 | 属性 | 说明 |
---|---|---|
缩放 | scale | transform:scale(x,y) |
移动 | translate | transform:translate(x,y) |
旋转 | rotate | transform:rotate(deg) |
倾斜 | skew | transform:skew(deg) |
中心点 | origin | transform-origin:(x,y) |
6. 2D过渡
属性 | 说明 |
---|---|
transition-property | 过渡或动态模拟的css属性 (all表示全部) |
transition-duration | 过渡所需时间 |
transition-timing-function | 过渡函数 |
transition-delay | 延迟时间 |
注意:
- 同时使用多个转换,其格式为:transform: translate() rotate() scale() skew()…等,其顺序会影转换的效果。 (先旋转会改变坐标轴方向)
- 过渡缩写:transition:all 1s ease 0,2s;
<!--过渡缩写-->
transition:过渡属性 过渡时间 过渡函数 延迟时间
transition:all 1s ease 0.2s;
7. 过渡函数
函数 | 说明 |
---|---|
ease | 又快到慢 (默认值) |
linear | 速度恒速 (匀速运行) |
ease-in | 越来越快 (渐显效果) |
ease-out | 越来越慢 (渐隐效果) |
ease-in-out | 先加速在减速 (渐显渐隐效果) |
steps() | 逐帧播放 |
8. 动画
动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画 ,常用来实现复杂的动画效果。
动画序列
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
- 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。
属性 | 描述 |
---|---|
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性,除了animation-play-state属性。 |
animation-name | 规定@keyframes动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0。 |
animation-timing-function | 规定动画函数,默认是“ease”。 |
animation-delay | 动画延迟时间,默认是0。 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"pause"。 |
animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards |
animation:动画名称 动画时间 动画函数 延迟时间 播放次数 播放方向 结束后状态
animation:myfirst 5s linear 1s infinite alternate forwards;
9. 3D转换
我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。
特点:
- 近大远小
- 物体后面遮挡不可见
9.1 三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
- x轴:水平向右 注意: x 右边是正值,左边是负值
- y轴:垂直向下 注意: y 下面是正值,上面是负值
- z轴:垂直屏幕 注意: 往外面是正值,往里面是负值
9.2 透视 perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 距离电脑平面的距离为视距
- 距离视觉点越近的在电脑平面成像越大,越远成像越远
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。
z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大。
9.3 3D呈现 transform-style
- 控制子元素是否开启三维立体环境。
- 给父亲添加影响的是子盒子。
- Transform-style: preserve-3d; 子元素开启立体空间,默认的值是 flat 不开启
9.4 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离
translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在Y轴上移动
translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ只能跟px单位)
9.5 3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转,对于元素旋转的方向的判断 我们需要先学习一个左手准则。
左手准则
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
语法:
transform:rotateX(45deg):沿着x轴正方向旋转 45度
transform:rotateY(45deg) :沿着y轴正方向旋转 45度
transform:rotateZ(45deg) :沿着Z轴正方向旋转 45度
transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转
10. 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。
私有前缀
1. moz-:代表 firefox 浏览器私有属性
2. -ms-:代表 ie 浏览器私有属性
3. -webkit-:代表 safari、chrome 私有属性
4. -o-:代表 Opera 私有属性
提倡写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
总结:
1. CSS3 新增加的属性、结构伪类、伪元素选择器.
2. CSS3 2D 移动、旋转和缩放属性.
3. CSS3 动画设置方法.
4. CSS3 3D 移动、旋转和缩放属性.