前端--CSS3的新特性

目录

一、CSS3的现状

二、新增的属性选择器

三、新增的结构伪类选择器

四、新增的伪元素选择器

五、新增的CSS3盒子模型

六、新增的CSS3属性过渡

七、新增的CSS其他特性--了解

八、CSS3 2D转换

九、CSS3 动画

---

一、CSS3的现状

• 新增大的CSS特性有兼容性问题，ie9+ 才支持
• 移动端支持优于 PC 端，不断改进中，应用相对广泛
• 现阶段主要学习：新增选择器和盒子模型以及其他特性

二、新增的属性选择器

    

三、新增的结构伪类选择器

nth-child(n) ：会把所有盒子都排列序号，执行时首先看第几个，之后看类型，作用是选择某个父元素的一个或多个特定的子元素

• n 可以是数字：就是选择第n 个子元素，里面数字从1开始
• n 可以是关键字：even 偶数。odd 奇数
• n 可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
  • 2n  --偶数
  • 2n+1  --奇数
  • 5n  --5的倍数
  • n+5  --从第五个开始（包括第五个）到最后
  • -n+5  --前五个（包括第五个）

nth-of-type(n) ：会先把指定盒子排列序号，执行的时候首先看指定的类型，之后看第几个

四、新增的伪元素选择器

  

五、新增的CSS3盒子模型

    

六、新增的CSS3属性过渡

如果想要写多个属性，则用逗号隔开，如果想要全部属性都变化，属性写 all 即可

七、新增的CSS其他特性--了解

CSS滤镜 filter：filter 属性将模糊或颜色偏移等图形效果应用于元素

语法：filter: 函数();

例如：filter: blur(5px);  ---blur模糊处理 数值越大越模糊

CSS 函数 calc：calc 函数让我们在声明CSS属性值时执行一些计算

语法：width: calc(100% - 80px);    （括号里面可以使用 + - * / 来进行计算）

---100%表示和父盒子一样大小

---100%-80px 表示永远比父盒子少80px

八、CSS3 2D转换

2D 移动 translate ：2D 移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

语法：

• transform: translate(x,y);   （x，y轴都移动）
• transform: translateX(n);   （只移动x轴）
• transform: translateY(n);   （只移动y轴）

重点：

• 定义2D 转换中的移动，沿着X和Y轴移动元素
• translate 最大的优点：不会影响到其他元素的位置
• translate 中的百分比单位是相对于自身高宽元素的 translate: (50%,50%);
• 对行内标签没有效果

2D 旋转 rotate ：2D 旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

语法：transform: rotate(度数);

重点：

• rotate 里面跟度数，单位是deg，例：rotate(45deg);
• 角度为正时顺时针，负时为逆时针
• 默认旋转的中心点是元素的中心点
  • 2D 转换中心点，语法：transform-origin: x y;
  • 注意后面的参数x和y用空格隔开
  • x y 默认转换的中心点是元素的中心点（50% 50%）
  • 还可以给x y设置像素px 或者方位名词（top bottom left right center）

2D 转换 scale ：缩放，即可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小

语法：transform: scale(x,y);

注意：

• 注意其中的x和y用逗号分隔，里面的数字不跟单位
• transform: scale(1,1); ---宽和高都放大了一倍，相当于没有放大
• transform: scale(2,2); ---宽和高都放大了两倍
• transform: scale(2);   ---只写了一个参数，第二个参数则第一个参数一样，相当于 scale(2,2)
• transform: scale(0.5,0.5); ---数字小于1就是缩小
• scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D 转换综合写法：

• 同时使用多个转换，其格式为：transform: translate() rotate() scale()...等
• 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
• 当我们同时有位移和其他属性时，记得要将位移放到最前

九、CSS3 动画