什么是css3？

CSS3是CSS（层叠样式表）技术的升级版本（是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能），于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

css3的新特性

1.动画（animation）

动画(animation) 是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的制作过程

首先定义动画，然后元素调用动画；那么如何定义动画呢？、

用keyframes定义动画

 @keyframes 动画名称 {
            /* 初始状态 */
            0% {
               
            }
            /* 结束状态 */
            100% {
            }
        }

使用动画：

 div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*调用动画： 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

创建一个简单的demo感受一下; 需求：页面打开，元素从左向右移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>动画animation</title>
    <style>
        /* 1.定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        .at {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 4s;
        }
    </style>

</head>
<body>
    <div class="at"></div>
</body>
</html>

动画序列：

动画从0%开始到100%结束，这个规则就是动画的序列。
在 @keyframes中定义css样式，就能创建由当前样式逐渐改变为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。
变化的时间要使用百分比的形式，或者使用“from"和“to”，等同与于“0%”和“100%”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>动画animation</title>
    <style>
        /* 动画序列 */
        /* 1.可以做多个状态的变化  keyframe 关键帧 */
        /* 2.里面的百分比是整数 */
        /* 3.里面的百分比就是总的时间的划分 */
        @keyframes move {
            /* 0%的内容可以不写，也可以直接不写0% */
           0% {
 
           }
           25% {
               transform: translate(1000px, 0);
           }
           50% {
               transform: translate(1000px, 200px);
               background-color:red;
           }
           75% {
               transform: translate(0px, 200px);
           }
           100% {
               transform: translate(0, 0);
               background-color:#000;
           }
        }
        .at {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 10s;
        }
    </style>

</head>
<body>
    <div class="at"></div>
</body>
</html>

动画的属性

动画的速度曲线

动画属性简写：

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态; 简写属性里面不包含animation-play-state

· 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用

· 想要动画走回去，而不是直接跳回来：animation-direction: alternate

· 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

2.圆角(border-radius)

使用方法：border-radius:圆角值；圆角值接收1-4个值：

如果只有一个值，则代表每个圆角相同（border-radius：10px; //4个圆角都为10px）
如果有两个值，则分别代表左上、右下两个和右上、左下两个圆角(border-radius：10px 5px; //左上、右下两个圆角都为10px，右上、左下两个都是5px；)
如果有三个值,第一个代表左上，第二个是右上和左下，第三个是右下；
如果有四个值，则依次代表左上，右上，右下，左下；
单独设置某一个角的圆角，使用border-xxx-xxx-radius(xxx代表位置，左上就是border-top-left-radius)

利用圆角属性，可以实现一些特殊的效果：

常规圆角

 div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius:10px ;
        }

圆角实现圆形 ``

    div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*元素为正方形时，设置圆角为宽高的一半*/
           /* border-radius:100px ; */
             /* 也可以用百分比*/
             border-radius:50%;
        }

圆角实现半圆

  div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border-radius: 100px 100px 0  0 ;
        }

圆角实现扇形

div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 100px 0 0 0 ;
        }

说到图形绘制，再额外增加两个常用的图形绘制，三角形和梯形，与圆角无关

边框实现三角形

 div {
            width: 0;
            height: 0;
            border-top: 50px solid red;
            border-left: 50px solid blue;
            border-right: 50px solid orange;
            border-bottom: 50px solid pink;
        }

边框实现梯形

   div {
            width: 100px;
            height: 0;
            border-bottom: 80px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

3.阴影

3.1 文本阴影(text-shadow)

语法

text-shadow: h-shadow v-shadow blur color;

属性

使用文字阴影可以实现多种炫酷文字效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>文本阴影(text-shadow)</title>
    <style>
        body{
            background-color: #000;
        }
        div{
            margin:20px 0;
            font-size: 30px;
        }
        .fd {
            color: #eee;
            text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;
        }

        .mb {
            text-shadow: 2px 2px 0 #9f4d95, -2px 2px 0 #9f4d95, 2px -2px 0 #9f4d95, -2px -2px 0 #9f4d95;
        }

        .thd {
            color: #fff;
            text-shadow: -2px -2px #ddd, -3px -3px #ddd, -4px -4px #ddd, -5px -5px #ddd;
        }

        .hy {
            text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80,
                2px -25px 18px #f20;
        }

        .gy {
            text-shadow: 0 0 20px #fff, 0 0 40px #ca8eff, 0 0 60px #6f00d2;
        }
    </style>

</head>

<body>
    <div class="fd">
        浮雕效果
    </div>
    <div class="mb">
        描边效果
    </div>
    <div class="thd">
        3D效果
    </div>
    <div class="hy">
        火焰特效
    </div>
    <div class="gy">
        光影特效
    </div>
</body>

</html>

3.2 盒子阴影(box-shadow)

语法

box-shadow: *h-shadow v-shadow blur spread color* inset;

属性

使用盒子阴影可以实现盒子的3D效果和模糊背影，在日常开发中用到的还算多

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>盒子阴影(box-shadow)</title>
    <style>
       .box1{
        width: 200px;
        height: 200px;
        background-color: #8ac007;
        margin: 50px;
        box-shadow: 10px 10px 5px green;
       }
       .box2{
        width: 200px;
        height: 200px;
        background-color: #8ac007;
        margin: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,.5);
       }
       .box3{
        width: 200px;
        height: 200px;
        background-color: #8ac007;
        margin: 50px;
        box-shadow: 0 0 30px rgba(0,0,0,.5) inset;
       }
    </style>

</head>

<body>
    <div class="box1">
      盒子悬浮效果1
    </div>
    <div class="box2">
        盒子悬浮效果2
    </div>
    <div class="box3">
        内阴影效果
    </div>
    
</body>

</html>

4.渐变(gradients)

之前的渐变只能通过图像实现，css3提供gradients渐变来实现，有效的减少下载的时间和宽带的使用；

CSS3 定义了两种类型的渐变（gradients）：

（1）线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向（2）径向渐变（Radial Gradients）- 由它们的中心定义

4.1 线性渐变：至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变实例：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>渐变(gradient)</title>
    <style>
        /* 线性渐变默认从左到右 */
        .line-left {
                width: 300px;
                height: 300px;
                background: linear-gradient(red, blue);
        }
        /* 如果需要别的方向渐变，需要指定方向 */
        .line-top {
                width: 300px;
                height: 300px;
                background: linear-gradient(to right,red, blue);
        }
        .line-diagonal {
                width: 300px;
                height: 300px;
                background: linear-gradient(to bottom right,red, blue);
        }
    </style>

</head>

<body>
    <div style="display:flex;justify-content: space-around;">
        <div>
            线性渐变：从左到右
            <div class="line-left"></div>
        </div>
        <div >
            线性渐变：从上到下
            <div class="line-top "></div>
        </div>
        <div >
            线性渐变：对角
            <div class="line-diagonal"></div>
        </div>
    </div>
   

</body>

</html

4.2 射线渐变：至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法

background: radial-gradient(center, shape size, start-color, …,last-color);

实例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>渐变(gradient)</title>
    <style>
        /* 均匀分布 */
        .grad-uniformity {
            width: 300px;
            height: 300px;
            background: radial-gradient(red, yellow, green);
        }

        /* 颜色节点自定义 非均匀分布 */
        .grad-Uneven {
            width: 300px;
            height: 300px;
            background: radial-gradient(red 5%, yellow 10%, green 80%);
        }

        /*shape 参数定义了形状；
         它可以是值 circle 或 ellipse；
          circle 表示圆形  默认 ellipse 椭圆 */
        .grad-circle {
            width: 500px;
            height: 300px;
            background: radial-gradient(circle, red, yellow, green);
        }
    </style>

</head>

<body>
    <div style="display:flex;">
        <div class="grad-uniformity"></div>
        <div class="grad-Uneven"></div>
        <div class="grad-circle"></div>
    </div>
</body>

</html>

效果

5.转换(transform)

转换的效果是让某个元素改变形状，大小和位置。 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。（注意：transform不会触发回流，和重绘）

所有操作的默认的基点都在中心位置，可以使用 transform-origin: (x,y) 来改变元素基点，一般基本不会用到。

5.1 移动（translate）

语法：transform:translate(x,y)   x,y 单位为元素单位

  2D：  transform:translate(x轴偏移，y轴偏移)  
        transform:translateX(x) 相对x轴偏移 
        transform:translateY(y) ......
          
  3D   transform:translate3d(x轴偏移，y轴偏移,z轴偏移) 
       transform:translateZ(z) ......

transform: translate(10px,20px);

注意：transform偏移和position偏移的区别，position定位位移可以根据自身属性设置进行相对于自身/或者浏览器视窗等效果，但是有一个问题。就是它的位置变动会引起回流重绘。transform不会有这个问题，原因就是它的移动过程是通过GPU控制的支持硬件加速。并不需要软件⽅⾯的渲染。有疑惑的话可以分别使用position和transform完成一个动画，就能看出来明显区别。

 根据translate的特性，我们可以使用translate配合其它css属性进行对于一个元素的居中，例如translate配合position就可以实现一个不定宽高元素的垂直左右居中

5.2 缩放（scale）

 语法：transform：scale（）x,y是缩放倍数 
 
   2D： transform:scale(x，y)  
        transform:scaleX(x)  
        transform:scaleY(y) 
          
  3D   transform:scale(x，y,z) 
       transform:scaleZ(z)

transform: scale(0.3,0.5);

5.3 旋转（rotate）

语法：transform：rotate（angle）angle是角度deg,负值为逆时针
 
  2D： transform:rotate(angle)
          
  3D   transform:rotate3d(x，y,z,angle) 
       transform:rotateZ(angle) 
       transform:rotateX(angle)  
       transform:rotateY(angle)

    transform: rotate(30deg);

5.4 倾斜

语法：transform:skew(x-angle,y-angle) 
     倾斜只有2D效果   
     skew(x-angle,y-angle) 
     skewX(angle) 
     skewY(angle)

  transform: skew(50deg);

5.5 其它

 定义不进行转换。
none
 为 3D 转换元素定义透视视图。
perspective(n)
 定义 2D 转换，使用六个值的矩阵。
matrix(n,n,n,n,n,n)
 定义 3D 转换，使用 16 个值的 4x4 矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

看一下transform属性实现的一些效果吧：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>CSS3立方体旋转动画</title>
 
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }
 
        div.wrap {
            width: 120px;
            height: 120px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%); /*利用位移来处理垂直水平居中*/
        }
 
        .wrap > div.cube {
            width: 120px;
            height: 120px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg); /*旋转*/
            animation: move 20s infinite linear; /*动画*/
        }
 
        /*关键帧*/
        @keyframes move {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube > div {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0.8;
            transition: all 0.4s ease-in-out, box-shadow 0.4s ease-in-out; /*过渡 属性 时间 过渡曲线*/
        }
 
        .cube div.out-front {
            transform: translateZ(60px); /*转换  位移*/
        }
 
        .cube div.out-back {
            transform: translateZ(-60px) rotateY(180deg); /*转换 位移 旋转*/
        }
 
        .cube div.out-left {
            transform: translateX(-60px) rotateY(-90deg);
        }
 
        .cube div.out-right {
            transform: translateX(60px) rotateY(90deg);
        }
 
        .cube div.out-top {
            transform: translateY(-60px) rotateX(90deg);
        }
 
        .cube div.out-bottom {
            transform: translateY(60px) rotateX(-90deg);
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="cube">
        <div class="out-front"><img style="width: 100%;height:100%;" src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp"></div>
        <div class="out-back"><img style="width: 100%;height:100%;" src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp"></div>
        <div class="out-left"><img  style="width: 100%;height:100%;" src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp"></div>
        <div class="out-right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp"></div>
        <div class="out-top"><img style="width: 100%;height:100%;" src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp"></div>
        <div class="out-bottom"><img  style="width: 100%;height:100%;" src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp"></div>
    </div>
</div>
</body>
</html>

ps：这个不是我做的，之前看别人做的。：瞬移

6.过渡（transition）

定义：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

语法：transition 属性是一个简写属性，用于设置四个过渡属性：

transition: property duration timing-function delay;

属性：

6.1 transition-property 用于指定要执行过渡的属性

- 多个属性之间使用 ',' 隔开
- 如果所有属性都需要过渡，则使用 all 关键字
- 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

6.2 transition-duration 用于指定过渡效果的持续时间

时间单位： s 秒和 ms 毫秒

ps:特别注意：transition-property 和transition-duration两个属性必须同时给定，否则是不会出现过渡效果的，

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>过渡（transition）</title>

    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: yellowgreen;
        }

        .box1 div {
            width: 100px;
            height: 50px;
        }

        .box2 {
            background-color: aqua;
    margin-bottom: 100px;
    transition-property: width, height;
    transition-duration: 2s, 1000ms;

        }

        .box3 {
            background-color: antiquewhite;
        }

        .box1:hover div {
            width: 200px;
    height: 100px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

可以用上面的代码体验一下效果

6.3 transition-timing-function 表示过渡的时序函数

    - 指定过渡的执行方式

    - 可选值：

           ease 默认值，慢速开始，先加速，再减速

           linear 匀速运动

           ease-in 加速运动

           ease-out 减速运动

           ease-in-out 先加速 后减速

           cubic-bezier() 来制定时序函数（贝塞尔曲线）

     - https://cubic-bezier.com ，这是一个贝塞尔曲线的网址，可以自己拖动曲线，

            获取想要的结果，有兴趣的小伙伴可以试试

            steps() 分步执行过渡效果

                - 第一个参数表示分几步

                - 第二个参数：

                    start 在时间开始时就执行过渡

                    end 在时间结束时执行过渡（默认值）

下面改动上面的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>过渡（transition）</title>

    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: yellowgreen;
        }

        .box1 div {
            width: 100px;
            height: 50px;
        }

        .box2 {
            background-color: aqua;
            margin-bottom: 100px;
            transition-property: margin-left;
            transition-duration: 2s;

        }

        .box3 {
            background-color: antiquewhite;
            transition-property: margin-left;
            transition-duration: 2s;
            transition-timing-function: linear;
        }   

        .box1:hover div {
            margin-left: 400px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

cubic-bezier()改动下，修改box3的 transition-timing-function

.box3 {
     transition-timing-function: cubic-bezier(.13,1.51,.82,-0.59);
  }

steps() 则是分步进行，我们同样修改 .box3 的 transition-timing-function：

.box3 {
    transition-timing-function: steps(3,start);
}

6.4 transition-delay: 过渡效果的延迟，等待一段时间后再执行过渡

修改上面的box3:

.box3 {
  background-color: antiquewhite;
  transition-property: margin-left;
  transition-duration: 2s;
  transition-delay: 1s;
 }

常用的就列这么几个吧，还有像媒体查询等等，后面再加吧，感谢观看，如有问题，欢迎指教

css3详解