CSS3 新特性

CSS3 新特性

一、CSS3 新增选择器

1、属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就不用借助类或者id选择器

选择符：

E[att]：选择具有att属性的E 元素

E[att='val']：选择具有att属性并且属性值的等于value的E元素

E[att^='val']：匹配具有att属性并且属性值以val开头的E元素

E[att$='val']：匹配具有att属性并且属性值以val结尾的E元素

E[att*='val']：匹配具有att属性并且属性值含有val的E元素

注意：类选择器、属性选择器、伪类选择器，权重为10

2、结构选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

选择符：

E:first-child：匹配父元素中的第一个子元素E

E:last-child：匹配父元素中的最后一个子元素E

E:nth-child(n)：匹配父元素中的第n个子元素E

E:first-of-type：指定类型E的第一个

E:first-of-last：指定类型E的最后一个

E:nth-of-type(n)：指定类型E的第n个

区别：

  • nth-child对父元素里面的所有孩子排序选择（序号是固定的）先找到第n个孩子，然后再看看是否和E匹配
  • nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子

3、伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签，而不需要HTML标签，从而简化HTML结构

选择符：

::before：在元素内部的前面插入内容

::after：在元素内部的后面插入内容

注意：

  • before 和after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法:element::before{}
  • before和after必须有content属性
  • before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1

二、CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

  • box-sizing:content-box 盒子大小为width+padding+border（默认）

  • box-sizing：border-box 盒子大小为width

    如果盒子模型我们改为了 box-sizing: border-box,那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

三、CSS3滤镜filter

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

语法：filter:函数(); eg:filter:blur(5px); blur模糊处理 数值越大越模糊

四、CSS3 calc函数

calc()这个函数让你在声明CSS属性值时执行一些计算

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

五、CSS3过渡

过渡是CSS3中具有颠覆性的特征之一，可以在不使用Flash动画或JavaScript的情况下，元素从一种样式转变为另一种样式时为元素添加效果。经常和:hover一起搭配使用

过渡动画：是一种状态渐渐的过渡到另外一个状态。

语法:transition:要过渡的属性 花费时间 运动曲线 何时开始

属性：想要变化的css属性，宽度高度 背景颜色都可以，如果想要所以属性都变化过渡，写一个all就可以

花费时间：单位是秒(必须写单位) eg：1s

运动曲线：默认是ease(可以省略)

何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

六、2D转换

转换(``transform` ) 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

  • 移动：translate
  • 旋转：rotate
  • 缩放：scale

1、2D转换之移动 translate

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

  • 语法：

    transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);

  • 注意：

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

2、2D转换之旋转 rotate

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

  • 语法：transform：rotate(度数)
  • 注意：
    • rotate里面跟度数，单位是deg 比如rotate(45deg)
    • 角度为正时，顺时针，负时，为逆时针
    • 默认旋转的中心点是元素的中心点

3、2D 转换中心点 transform-origin

设置元素转换中心点

  • 语法：transform-origin: x y ;

  • 注意：

    • 注意后面参数x和y用空格隔开
    • x y 默认转换的中心点是元素的中心点(50% 50%)
    • 还可以给x y设置像素 或者方位名词 （top、bottom、left、right、center）

4、2D 转换之缩放scale

控制元素的放大和缩小

  • 语法：transform: scale(x,y)
  • 注意：
    • 其中的x和y用逗号分离
    • transform: scale(1,1) 宽高都放大一倍，相对于没有放大
    • transform: scale(2,2) 宽高都放大2倍
    • transform: scale(2) 只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
    • transform: scale(0.5,0.5) 缩小
    • salce缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5、2D转换综合写法

  • 格式：transform：translate() rotate() scale()...等

  • 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）

  • 当我们同时有位移和其他属性的时候，记得要将位移放到最前

七、CSS3 3D转换

动画是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1、动画的基本使用

制作动画分两步：

  • 先定义动画

    • 用keyframes定义动画（类似定义类选择器）

      @keyframes 动画名称 {
                0% {
                    width: 100px;
                }
                100% {
                    width: 200px;
                }
            }
      动画序列

      • 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列

      • 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

      • 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数

      • 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%

  • 再使用（调用）动画

      /* 调用动画 */
            animation-name: 动画名称;
            /* 持续时间 */
            animation-duration: 持续时间;

2、动画常见属性

  • @keyframes：规定动画

  • animation：所有动画的简写属性，除了animation-play-state属性

  • animation-name：规定@keyframes动画的名称。（必须）

  • animation-duration：规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）

  • animation-timing-function：规定动画的速度曲线，默认是“ease”

    • linear：动画从头到尾的速度是相同的匀速
    • ease：默认，动画以低速开始，然后加快，在结束前变慢
    • ease-in：动画以低速开始
    • ease-out：动画以低速结束
    • ease-in-out：动画以低速开始和结束
    • step()：指定了时间函数中的间隔数量（步长）

  • animation-delay：规定动画何时开始，默认是0

  • animation-iteration-count：规定动画被播放的次数，默认是1，还有infinite无限循环播放

  • animation-direction：规定动画是否在下个周期逆向播放，默认是“normal”，alternate逆播放

  • animation-play-state：规定动画是否正在运行或暂停，默认是“running”，还有“pause”

  • animation-fill-mode：规定动画结束后状态，保持forward回到起始backwards

3、动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

  • 简写属性里面不包含animation-play-state
  • 暂停动画：animation-play-state: puased;经常和鼠标经过等其他配合使用
  • 想要动画走回来，而不是直接跳回来：annimation-direction: alternate
  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwords

4、透视 perspective

如果想要网页产生3D效果需要透视（理解成3D物体投影到2D平面内）

  • 透视的单位是像素

  • 透视写到被观察的元素的父盒子上

    • d：视距，视距是一个距离人的眼镜到屏幕的距离
    • z：z轴，物体距离屏幕的距离，z轴越大我们看到的物体就越大

image-20210119234739255

  • translform：translateZ(100px) ：仅在Z轴移动有了透视，就能看到translateZ引起的变化

5、3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

 /* 沿着x轴正方向旋转45度 */
 transform: rotateX(45deg);
 /* 沿着y轴正方向旋转45度 */
 transform: rotateY(45deg);
 /* 沿着Z轴正方向旋转45deg */
 transform: rotateZ(45deg);
 /* 沿着自定义轴旋转deg为角度 */
 transform: rotate3d(x,y,z,deg);

6、3D呈现 transfrom-style

  • 控制子元素是否开启三维立体环境

  • transform-style: flat子元素不开启3d立体空间 默认的

  • transform-style: preserve-3d; 子元素开启立体空间

  • 代码写给父级，影响的是子盒子

posted @ 2021-01-21 17:00  Sini-xll  阅读(72)  评论(0)    收藏  举报