CSS3

CSS3

新属性

边框圆角

border-radius: px| %：设置边框圆角

设置为50%可以实现边框为圆，但标签宽高比例必须是1:1。

颜色透明度

在CSS2中，可通过颜色单词、十六进制数、RGB三种方式设置颜色。CSS3可采用RGBA设置颜色，与RGB相比增加了alpha参数，0为完全透明、1为完全不透明。

需要注意的是，RGBA调节透明度与opacity调节透明度相比，opacity是整个标签及子标签都会受透明度影响，而RGBA只会影响颜色本身，标签内容不受影响。

字体图标

本质上是一个字体，该字体的所有字符都是小图标。使用时先引入第三方的图标字体，引入HTML页面中，再通过<i class="图标对应class">使用。图标在页面上是作为一个文字来显示的，其本身可以改变字体颜色。

常用第三方字体库：fontawesome。

背景固定

background-attachment:fixed| scroll：设置背景图片是否固定在页面上

边框阴影

box-shadow：设置盒子的边框阴影，有五个参数：x轴的偏移量、y轴的偏移量、阴影模糊程度、阴影的宽度、阴影的颜色，也可以给边框阴影加inset表示阴影变为内部阴影。边框阴影支持同时指定多个，每个阴影之间代码是以逗号分割。

文字阴影

text-shadow：设置文字的阴影，有五个参数：x轴的偏移量、y轴的偏移量、阴影模糊程度、阴影的宽度、阴影的颜色，支持多个文字阴影，代码以逗号分割。

倒影

-webkit-box-reflect: below| above：Chrome专属的属性。

线性渐变

background-image:linear-gradient(渐变方向, 颜色1, 颜色2);：线性渐变(linear-gradient)，在CSS中是作为背景图片的一个特殊的颜色来使用的。

• 渐变方向

  • 上下左右
    • to bottom ：自上而下(默认)
    • to top：自下而上
    • to left：自右到左
    • to right：自左到右
  • 对角线
    • to top left ：从右下到左上
    • to top right： 从左下到右上
    • to bottom left：从右上到左下
    • to bottom right：从左上到右下
  • 指定角度
    • linear-gradient(30deg, red, blue)
    • 0deg是从下往上，以顺时针为正，逆时针为负。

• 色标(颜色渐变范围)

  background-image:linear-gradient(渐变方向，颜色1 百分比, 颜色2 百分比, 颜色n 百分比)：从0%渐变开始，通过百分比设置来决定每个颜色的渐变范围，渐变到100%就结束。

• 重复渐变

  background-image:repeating-linear-gradient(red 0%, blue 30%)：在渐变范围内，会重复的进行相同的渐变。

径向渐变

background-image:radial-gradient(颜色1, 颜色2)：以一个椭圆或圆为中心四周扩散的渐变。

• circle：改变形状，默认为椭圆。

• 改变圆心点

  • at top left ：圆心点在左上角
  • at bottom right：圆心在右下角
  • at center right：圆心在右边界中间
  • at top right：圆心在右上角
  • at bottom left：圆心在左下角
  • at center left：圆心在左边界中间
  • at center top ：圆心在上边界中间
  • at center bottom：圆心在下边界中间
  • 像素(百分比)：background-image:radial-gradient(at 50px 50px , red, blue);是相对盒子尺寸而言的。

• 色标(颜色渐变范围)

  background-image:radial-gradient(大小 at 中心点, 颜色1 百分比, 颜色2 百分比, 颜色3 百分比, 颜色n 百分比);：类似于线性渐变，从0%渐变开始，通过百分比设置来决定每个颜色的渐变范围，渐变到100%就结束。

• 形状大小

  • background-image:radial-gradient(50px, 颜色1, 颜色2);：渐变的大小为50px
  • background-image:radial-gradient(150px 200px, 颜色1, 颜色2);：渐变的宽度为150px，高度为200px

• 细节调整

  • closest-side：最近的边，渐变的大小调整为渐变边缘能够接触最近的边。
  • farthest-side：最远的边，渐变的大小调整为渐变边缘能够接触最远的边。
  • closest-corner：最近的角，渐变的大小调整为渐变边缘能够接触最近的角。
  • farthest-corner：最远的角，渐变的大小调整为渐变边缘能够接触最远的角。

背景剪切(文字背景)

对背景图片进行剪切，设置背景图片在指定区域中显示。

• background-clip: border-box;：边框区域，背景只会在盒子区域看到(默认)。
• background-clip: padding-box;：内边距区域，背景只会在内边距区域看到。
• background-clip: content-box;：内容区域，背景只会在内容区域看到。
• -webkit-background-clip: text;：文字区域，Chrome提供的新的区域，背景只会体现在文字里，需要注意的是，文字本身有颜色，所以需要先把文字颜色设成透明色( color: 透明色;)才有效果。

CSS3选择器

兄弟选择器

• +：定位紧挨着的下一个兄弟标签

  /* 例子：对p标签设置样式。p标签的上一个兄弟标签必须是div */
  div + p{
      color:red;
  }
  

• ~：定位符合条件的所有的后续兄弟标签

  /* 例子：找到div后续的所有p兄弟标签 */
  div ~ p {
      color:red;
  }
  

后代选择器

• div p：找到div的所有后代p标签，儿子孙子曾孙······往下找到底。

• div > p：找到div的所有直接子p标签，即只找儿子。

  /* 找到div里所有的直接子p标签 */
  div >p{
  	color:red;
  }
  

属性选择器

• div[id=demo]：找到所有的id为demo的div标签。
• div[id]：找到所有有id属性的div标签。
• div[id*=abc]：找到所有id属性值里有abc的div标签，只要id属性包含了abc即可。
• div[id~=abc]：找到所有id属性值里有abc的div标签，abc必须是单独的一个单词，跟其他单词之间有空格。

结构选择器

• :first-child：选择作为其父标签第一个子标签的标签，而非指该标签本身的第一个子标签。

  /* 例子：找到td并设置样式，条件：td是某个标签的第一个子标签 */
  p:last-child{
      color:red;
  }
  

• :last-child：选择作为其父标签最后一个子标签的标签，而非指该标签本身的最后一个子标签。

  /* 例子：找到p标签并设置样式，条件：p是某个标签的最后一个子标签 */
  p:last-child{
      color:red;
  }
  

• :nth-child(n)：选择作为其父标签第n个子标签的标签，而非指该标签本身的第n个子标签。

  /* 例子：找到p标签并设置样式，条件：p是某个标签的第3个子标签 */
  p:nth-child(3){
      color:red;
  }
  /* 例子：找到p标签并设置样式，条件：p是某个标签的奇数子标签 */
  p:nth-child(2n-1){
      color:red;
  }
  /* 例子：找到p标签并设置样式，条件：p是某个标签的偶数子标签 */
  p:nth-child(2n){
      color:red;
  }
  

• :nth-last-child（n）：选择作为其父标签倒数第n个子标签的标签，而非指该标签本身的倒数第n个子标签。

  /* 例子：找到p标签并设置样式，条件：p是某个标签的倒数第3个子标签 */
  p:nth-last-child(3){
      color:red;
  }
  

• :nth-of-type(n)：选择作为其父标签第n个同类型的子标签的标签，而非指该标签本身的第n个同类型的子标签。

  /* 例子：找到符合条件的p标签，条件是：p标签是作为其父标签的第三个p子标签 */
  p:nth-of-type(3){
      color:red;
  }
  

• :nth-last-of-type(n)：选择作为其父标签倒数第n个同类型的子标签的标签，而非指该标签本身的倒数第n个同类型的子标签。

• :not()：选择不符合条件的标签

  /* 除了p标签之外的所有标签字体颜色是红色 */
  :not(p){
      color:red;
  }
  

CSS3动画

过渡

transition：能够让样式的变化变得平滑过渡

transition: property transition-duration transition-timing-function transition-delay;
/*例子：*/
transition: width  2s linear 2s;

• property：需要过渡变化的css属性(必需)，all表示针对所有变化的css属性。
• transition-duration：过渡的持续时间(必需)。
• transition-timing-function：速度曲线，控制过渡的速度。
  • ease：先慢后快 (默认)
  • linear：匀速
  • ease-in：以低速开始
  • ease-out：以低速结束
  • ease-in-out：以低速开始和结束
• transition-delay：过渡的延迟时间，即几秒后开始过渡。

2D动画

Animation语法

CSS通过animation属性来实现动画。本身Animation是一个组合属性

animation: 动画名称 动画的持续时间 动画的延时时间 动画的速度 动画的播放次数  是否来回播放  动画的状态;

• animation-name：动画名称，指定一个关键帧为动画名称(必需)。
• animation-duration：动画持续时间(必需)。
• animation-delay：动画延迟时间
• animation-timing-function：设置速度曲线
  • ease：先慢后快 (默认)
  • linear：匀速
  • ease-in：以低速开始
  • ease-out：以低速结束
  • ease-in-out：以低速开始和结束
• animation-iteration-count：动画的播放次数。infinite：无限次数。
• animation-direction：控制动画的播放方向，是否允许反向播放，默认不允许。alternate：允许来回播放。
• animation-fill-mode：是否保留动画的结束状态。默认不保持。forwards：保持。
• animation-play-state：控制动画的执行状态。paused：暂停。

Animation使用流程

1. 利用@keyframes定义动画的关键帧，并设置动画名称。

   @keyframes 动画名称{
       from| 0%{
           动画初始的样式
       }
       to|100%{
           动画结束之后的样式
       }
   }
   

2. 对标签使用animation来执行动画。

   div{
       animation: 动画名称 动画持续时间;
   }
   

多段动画整合

设置多个百分比状态，实现多段动画。

2D转换

transform：可实现标签的旋转、位移等特性。

位移

translate：控制标签的移动，margin或top主要是用于页面布局，实现移动动画应使用此属性，不会影响布局，性能也会更好。

transform:translate(x轴的移动量，y轴的移动量);
transform:translate(x轴的移动量);
transform:translateX(x轴的移动量);
transform:translateY(Y轴的移动量);

旋转

rotate：实现标签的旋转，正角度为顺时针，负角度为逆时针。

transform:rotate(角度);
transform:rotateX(角度);
transform:rotateY(角度);

• 标签的默认旋转中心是盒子的中心点。
• 如果先旋转再位移，会导致旋转中心点的改变。所以一般是先位移，再旋转。

缩放

scale：对标签按比例缩放

transform:scale(宽度比例, 高度比例);
transform:scale(尺寸比例); /*只有一个参数则宽高同比例*/

倾斜

skew：对盒子进行倾斜操作，但尺寸会进行拉伸，变成一个平行四边形。

transform:skew(x轴角度, y轴角度);
transform:skew(x轴角度); /*单独指定x轴倾斜*/
transform:skewX(x轴角度); /*单独指定x轴倾斜*/
transform:skewY(y轴角度); /*单独指定y轴倾斜*/

转换基点

transform-origin：改变某个标签的转换基点

transform-origin: x轴的偏移量 y轴的偏移量

• 偏移量指的是相对于标签的左上角(即原点)的距离
• 偏移量可以是具体的像素、百分比或者center、left、right。

3D动画

三维坐标系

在二维坐标系的基础之上多了一个z轴，构成立体的坐标系。三维坐标系没有严格的标准，一般可以采用左手或右手系统来表示。

景深

景深(depth of field)：从摄影角度来讲，指的相机拍摄画面中清晰成像的区域。根据景深的深度不同，分为浅景深以及深景深，光圈越大，景深越浅。浅景深的图片只有局部一部分是清晰，其他区域都是模糊的，模糊的区域越少，景深越深。

从屏幕角度将，景深指的是页面内容和屏幕之间的距离。通过景深，能够在页面内容和屏幕之间构建一块空间，称为3D空间。

perspective:  px 

默认景深为0 ，即屏幕和页面之间没有距离，可以理解为一个2D平面。对于3D效果来说，景深越浅，越明显。

3D子元素

transform-style ：决定了某个标签里面的子元素是以2D模式还是3D模式进行展示，默认是2D。

transform-style:flat| preserve-3d 

默认2D情况下，该标签里面的子标签所有的转换会以2D的形式进行展示，并且子标签的活动空间全在父标签所在平面上。

3D观察模式

perspective-origin：设置观察者模式，可以从不同的角度去观察盒子

perspective-origin:x y;

• x和y表示x轴和y轴的偏移量，确定了观察者的位置，具体值可以是top、left、bottom、right、%、px等
• 默认是正中间:perspective-origin:center center ;

3D一般流程

1. 给父标签设置景深
2. 设置子标签为3D子元素
3. 给子标签设置3D转换

3D转换

同样是transform，只是增添了Z轴。

3D位移

translateZ：Z轴移动量。z轴向外为正，设置足够px，可能会导致标签紧挨屏幕(放大)，反之缩小。

translate3D(x, y, z)：3轴同时设置。

3D旋转

rotateZ：Z轴的角度。

rotate3d(x, y, z, 旋转的角度)：3轴同时设置。对于x、y、z，0为不旋转，1为需要旋转。

3D缩放

跟2D旋转一模一样。

3D转换基点

transform-origin添加了对z轴的支持，可以实现标签沿某一点进行3D旋转。

transform-origin:x y z;