CSS3 新增选择器

CSS3 新增选择器

• 子级选择器 element1 > element2

  • 如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择

• 兄弟选择器

  • 相邻兄弟 E1 + E2
    • 选中的是紧跟在 E1 之后的同级元素 E2。
    • 只能选中紧跟在后面的一个 E2 元素。
    • 二者有相同的父元素。
    • • 符号前后可以添加空格书写
  • 他兄弟选择器 element1~element2
    • 选择 element1 之后出现的所有 element2。
    • 两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
    • ~ 符号前后可以添加空格书写。

• 结构伪类选择器

  选择器	简介
  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个

  • E:nth-child(n) 和E:nth-of-type(n) 的区别
    • E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。
    • E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素。

• 伪元素选择器

  • 新增伪元素
    • h5 写法和传统写法区别
      • 单冒号 E:before;双冒号 E::before;浏览器对以上写法都能识别，双冒号是 h5 的语法规范
    • 注意
      • 伪元素只能给双标签添加，不能给单标签添加
      • 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
      • 伪元素里面必须写上属性 content:"";
      • before 和 after 创建一个元素，但是属于行内元素。
      • 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。

      .box::before,.box::after{
        content:"123";
        display:block;
        height:50px;
        background-color: pink;
      }
      .ps::first-letter{ /*选择到了容器内的第一个字母*/
        background-color: pink;     
      }
      .ps::first-line{ /*选择到了容器内的第一行文本*/
        background-color: blue;     
      }
    

• 属性选择器

  • 属性选择器用来选择包含指定属性的标签
  • 伪类选择器、属性选择器 的权重等于类选择器;伪元素选择器 的权重等于标签选择器。

  选择器	简介
  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元素

  input[name]{
    width: 30px;
      height: 30px;
  }
  input[name="hobby"]{
    width: 30px;
      height: 30px;
  }
  input[name^="hobby"]{
    width: 30px;
      height: 30px;
  }
  input[name$="list"]{
    width: 30px;
      height: 30px;
  }
  input[name*="user"]{
    width: 30px;
      height: 30px;
  }
  

• CSS3 盒模型-box-sizing 属性

  • content-box 标准模式
    • Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分
    • 在 width 和 height 之外绘制元素的内边距和边框
  • border-box 怪异模式
    • Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后，内容区域会收缩
    • 为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制

• 边框圆角 border-radius

  • 写法
    • border-radius: 左上角 右上角 右下角 左下角;
    • border-radius: 左上角 右上角和左下角 右下角 ;
    • border-radius: 左上角和右下角 右上角和左下角 ;
    • border-radius: 四个角相同;
    • border-radius:水平方向/垂直方向；例border-radius:50% 20% 40%/20% 30%;
  • 浏览器兼容
    • ie8及以下版本浏览器不支持border-radius属性，其他浏览器都支持

• 文字阴影 text-shadow

  • text-shadow:水平阴影 垂直阴影 blur模糊距离 阴影颜色；

      h1{
        <!--text-shadow:3px 4px;-->
        text-shadow:3px 4px 4px #f00;
      }
    

  • 多层阴影
    • 多阴影中，先写的阴影压盖在后写的阴影上

      h1{
        text-shadow:3px 3px 3px #f00,
        6px 6px 3px #0f0,
        9px 9px 4px #00f;
      }
      

• 盒子阴影 box-shadow

  • box-shadow:水平阴影 垂直阴影 blur模糊距离 spread阴影尺寸 阴影颜色 inset内阴影；

      div{
         width: 300px;
         height: 100px;
         background-color: pink;
         <!--box-shadow:3px 4px;-->
         box-shadow:3px 4px 5px 4px #000;
      }
    

  • 多层阴影
    • 多阴影中，先写的阴影压盖在后写的阴影上

      img{
        box-shadow:3px 3px 5px 4px #f00,
        6px 6px 5px 4px #0f0,
        9px 9px 5px 4px #00f;
      }
      

• 过渡属性 transition

  • 在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。
  • 语法格式：transition：过渡的属性 过渡时间 运动曲线 延时时间；
  • transition-property过渡的属性
    • none 表示没有属性过渡
    • all 表示所有变化的属性都过渡
    • 属性名 使用具体的属性名，多个属性名中间逗号分隔
  • 时间
    • transition-duration 过渡时间：以s秒为单位。
    • transition-delay 延时时间：以s秒为单位。0s也必须加单位
  • transition-timing-function 时间曲线
    • |值|描述|
      |linear|规定以相同速度开始至结束的过渡效果|
      |ease|规定慢速开始，然后变快，然后慢速结束的过渡效果|
      |ease-in|规定以慢速开始的过渡效果|
      |ease-out|规定以慢速结束的过渡效果|
      |ease-in-out|规定以慢速开始和结束的过渡效果|
      |cubic-bezier(x1,y1,x2,y2)|在cubic-bezier函数中定义自己的值。x1,x2取0-1之间的值，y1、y2取任意值，四个数值表示拉扯的点的两个坐标|

      .box{
        width:100px;
        height:100px;
        background-color:pink;
        transition:all 5s ease 1s;
      }
      .box:hover{
        width:500px;
      }
      

    • 浏览器兼容
      • IE 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
      • Safari 需要前缀 -webkit-。
      • 注意：IE 9 以及更早的版本，不支持 transition 属性。

transform

2D 转换

• 属性名：transform
• 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
• 属性值：多种转换方法的属性值，可以实现不同的转换效果。
  • 位移 translate()
    • transform:translate(x,y); 水平和垂直方向位移的距离,px值或百分比，区分正负
    • transform:translate(x);只有一个数值，表示水平方向的位移
    • 应用(居中)

      .box{
         position: relative;
         width: 500px;
         height: 100px;
         border: 1px solid;
      }
      .box p{
          position: absolute;
          left:50%;
          width: 100px;
          height: 100px;
          background-color: skyblue;
          transform: translate(-50%);   
    

  • 缩放 scale()
    • scale(x, y) x,y分别为改变元素的宽度和高度的倍数
    • scale(n) 只有一个值，表示宽度和高度同时缩放n倍
    • scaleX(n) 改变元素的宽度
    • scaleY(n) 改变元素的高度
  • 旋转 rotate()
    • rotate(数字deg)
    • 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有一个属性值。
    • 注意：元素旋转后，坐标轴也跟着发生转变。
    • 因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。
  • 倾斜 skew()
    • transform: skew(数字deg,数字deg);
    • 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0
  • transform­-origin 属性
    • 作用：设置调整元素的水平和垂直方向原点的位置。
    • 调整元素的基准点。
    • 属性值：包含两个，中间使用空格分隔。
    • transform­-origin:x y;
      • x 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
      • y 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

3D 转换 perspective

• 透视 近大远小。
  • 电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
  • 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果
  • 并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化，
    则设置透视效果
• 透视属性 perspective
  • 作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
  • 属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。一般1000+。
  • 注意：透视属性perspective需要设置给 3D 变化元素的父级。
• 3D 旋转
  • transform­: rotateX(angle);
  • rotateX(angle) 定义沿着 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

      .box{
          width: 300px;
          height: 200px;
          border: 1px solid;
          margin: 50px auto;
          perspective: 500px;
      }
      .box p{
          width: 300px;
          height: 200px;
          background-color: pink;
          transition: all 1s ease;
      }
      .box p:hover{
          transform: rotateX(30deg);
      }
  

  • 属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转
• 3D 位移
  • translateX(x) 设置 X 轴的位移值。
  • translateY(y) 设置 Y 轴的位移值。
  • translateZ(z) 定义3D位移，设置Z轴的位移值。
  • 属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动
• transform-style属性
  • 用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴
  • 属性值：flat：所有子元素在 2D 平面呈现；preserve-3d：保留 3D 空间
  • 一般来说，该属性设置给 3D 变换图形的父级元素
• 浏览器兼容
  • Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • Internet Explorer 9

css3 动画

• css3 动画制作分为两步：创建动画、绑定动画
• @keyframes 规则
  • @keyframes 规则用于创建动画。
  • 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。
  • 可以改变任意多的样式任意多的次数。
  • 需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
• @keyframes书写方法
  @keyframes 动画名称 {
  动画过程，可以添加任意百分比处的动画细节
  }
• animation 属性
  • 需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。animation 属性用于对动画进行捆绑。
  • 语法：
    div {
    animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间；
    }
  • 其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。
    |属性|描述|
    |animation-name |规定 @keyframes 动画的名称。|
    |animation-duration |规定动画完成一个周期所花费的秒或毫秒。默认是 0。|
    |animation­timing-function |规定动画的速度曲线。默认是 “ease”。|
    |animation­delay |规定动画何时开始。默认是 0。|
    |animation­iteration-count |规定动画被播放的次数。默认是 1。infinite表示无限次播放。|

  .box{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 200px auto;
        background-color: skyblue;
        animation: move 3s linear infinite;
    }
    @keyframes move{
        0% {
          transform: translateY(0);
        }
        25% {
          transform: translateY(150px);
        }
        50% {
          transform: translateY(0);
        }
        75% {
          transform: translateY(-150px);
        }
        100% {
          transform: translateY(0);
        }
    }
  

• 浏览器兼容
  • Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。