search

AlexZ33 / lessions

自己练习的各种demo和课程
12 stars 2 forks source link

CSS教程：CSS（高级） #79

Open AlexZ33 opened 4 years ago

AlexZ33 commented 4 years ago

CSS（高级）

CSS 动画

[Transform（变换）]()

2D 转换

CSS3 2D转换，我们可以斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)元素。
注意： Internet Explorer 10, Firefox, 和 Opera支持transform 属性。Chrome 和 Safari 要求前缀 -webkit- 版本。 Internet Explorer 9 要求前缀 -ms- 版本.
常用 2D 变换方法：

以上几种方法都有其各自的利弊，在实际应用中建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别skewX(30deg) 如下图：

skewY(10deg) 如下图：
#
skew(30deg, 10deg) 如下图：

matrix()

matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

.matrix
{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

源码

https://gitee.com/turingitclub/css-learning/blob/dev/base/2d_transform.html

3D 转换

CSS3 3D Transform,用于 3 维动画或旋转。
CSS3 3D 转换是一个属性,用于改变元素的实际形式。这个特性可以改变元素的形状、大小和位置。
主要有下列方法：

注意：Internet Explorer 10 和 Firefox 支持 3D 转换； Chrome 和 Safari 必须添加前缀 -webkit-； Opera 还不支持 3D 转换(支持 2D 转换 )
otateX()
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

.rotate-x {
    transform: rotateX(60deg);
    -webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

rotateY()

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

.rotate-y {
    transform: rotateY(60deg);
    -webkit-transform: rotateY(120deg); /* Safari and Chrome */
}

rotateZ()

rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。

.rotate-z {
    transform: rotateZ(60deg);
    -webkit-transform: rotateY(120deg); /* Safari and Chrome */
}

rotate3d()

otate3d(x,y,z,a)中取值说明：

例子

.rotate-3d {
    transform: rotate3d(0,0.6,0.2,60deg);
    -webkit-transform: rotate3d(0.6,0.6,0.2,60deg); /* Safari and Chrome */
}

转换方法

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

源码

https://gitee.com/turingitclub/css-learning/blob/dev/base/3d_transform.html

[Transition（过渡）]()

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

transitionComparition.gif
https://codepen.io/AlexZ33/pen/KKwXLea

尽管 CSS3 过渡效果是足够的过渡的一个元素,但是 text-transform 属性可以提高 CSS3 过渡效果的风格。
主要有四个属性的CSS3转换效果,已被描述如下:

注意：Internet Explorer 10, Firefox, Opera, Chrome, 和Opera 支持transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 属性。Chrome 25 以及更早的版本，需要前缀 -webkit-

transition-property

规定应用过渡的 CSS 属性的名称。

transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;

transition-duration

定义过渡效果花费的时间。默认是 0。 时间单位可以是秒/毫秒。

transition-duration: 2s;
transition-duration: 1000ms;
transition-duration: 1000ms, 2000ms;

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-in-out;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(1.000, 0.835, 0.000, 0.945);

其中：

https://codepen.io/AlexZ33/pen/KKwvWjg

注意，emmet语法。 我要生成下面的html结构，用的  div#wrapper>(p+div.progress-bar#bar$)*9  再按Tab键

image.png

transition-delay

规定过渡效果何时开始。默认是 0。

transition-delay: 2s;
transition-delay: 1000ms, 2000ms;
transition-delay: -2s;

https://codepen.io/AlexZ33/pen/eYmBYmW

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过渡效果 | AlexZ33</title>
    <meta name="description" content="过渡效果">
    <meta name="author" content="AlexZ33"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">

    <style>
        .example {
            width: 100px;
            height: 100px;
            background: red;
            transition-property: width;
            transition-duration: 1s;
            transition-timing-function: linear;
            transition-delay: 2s;
            /* Safari */
            -webkit-transition-property: width;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: linear;
            -webkit-transition-delay: 2s;
        }
        .example:hover {
            width: 200px;
        }
        #example {
            position: relative;
            width: 530px;
            height: 530px;
            margin: 0 auto 10px;
            padding: 10px;
        }
        .childbox {
            font-size: 12px;
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            background-color: #ccc;
        }
        .childbox p {
            text-align: center;
            padding-top: 10px;
        }
        #ease.childbox {
            -webkit-transition: all 4s ease;
            -moz-transition: all 4s ease;
            -o-transition: all 4s ease;
            transition: all 4s ease;
            border: 1px solid #ff0000;
        }
        #ease_in.childbox {
            -webkit-transition: all 4s ease-in;
            -moz-transition: all 4s ease-in;
            -o-transition: all 4s ease-in;
            transition: all 4s ease-in;
            border: 1px solid #00ffff;
        }
        #ease_out.childbox {
            -webkit-transition: all 4s ease-out;
            -moz-transition: all 4s ease-out;
            -o-transition: all 4s ease-out;
            transition: all 4s ease-out;
            border: 1px solid #f5f5f5;
        }
        #ease_in_out.childbox {
            -webkit-transition: all 4s ease-in-out;
            -moz-transition: all 4s ease-in-out;
            -o-transition: all 4s ease-in-out;
            transition: all 4s ease-in-out;
            border: 1px solid #f209f3;
        }
        #linear.childbox {
            -webkit-transition: all 4s linear;
            -moz-transition: all 4s linear;
            -o-transition: all 4s linear;
            transition: all 4s linear;
            border: 1px solid #ddddff;
        }
        #custom.childbox {
            -webkit-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            -moz-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            -o-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            border: 1px solid #cfdf44;
        }
        #negative.childbox {
            -webkit-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            -moz-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            -o-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            border: 1px solid #000;
        }
        #steps-start.childbox {
            -webkit-transition: all 4s steps(4, start);
            -moz-transition: all 4s steps(4, start);
            -o-transition: all 4s steps(4, start);
            transition: all 4s steps(4, start);
            border: 1px solid #ff0;
        }
        #steps-end.childbox {
            -webkit-transition: all 4s steps(4, end);
            -moz-transition: all 4s steps(4, end);
            -o-transition: all 4s steps(4, end);
            transition: all 4s steps(4, end);
            border: 1px solid #0f0;
        }
        #example:hover .childbox, #example.hover_effect .childbox {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-transform: rotate(720deg);
            -moz-transform: rotate(720deg);
            -o-transform: rotate(720deg);
            -ms-transform: rotate(720deg);
            transform: rotate(720deg);
            margin-left: 420px;
            background-color: #fff;
        }
    </style>

</head>
<body>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>

<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

<div class="example"></div>

<p>Hover on object to see it in action</p>

<div id="example">
    <div id="ease" class="childbox"><p>CSS3</p></div>
    <div id="ease_in" class="childbox"><p>CSS3</p></div>
    <div id="ease_out" class="childbox"><p>CSS3</p></div>
    <div id="ease_in_out" class="childbox"><p>CSS3</p></div>
    <div id="linear" class="childbox"><p>CSS3</p></div>
    <div id="custom" class="childbox"><p>CSS3</p></div>
    <div id="negative" class="childbox"><p>CSS3</p></div>
    <div id="steps-start" class="childbox"><p>CSS3</p></div>
    <div id="steps-end" class="childbox"><p>CSS3</p></div>
</div>

</body>
</html>

CSS 3D  transition

https://codepen.io/AlexZ33/pen/VwYMOBR

[Animation（动画）]()

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash 动画，和 Javascripts。

CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是用来创建动画。 @keyframes规则内指定一个 CSS样式和动画将逐步从目前的样式更改为新的样式。
注意：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。

CSS3 动画

当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个 CSS3 的动画属性绑定向一个选择器：

例子：

#animated_div {
    animation: animated_div 5s infinite;
    -moz-animation: animated_div 5s infinite;
    -webkit-animation: animated_div 5s infinite;
}

CSS3动画是什么？

例子：

@keyframes animated_div {
    0% {
        left: 0px;
    }
    20% {
        left: 50px;
        background-color: green;
    }
    40% {
        left: 140px;
        background-color: red;
    }
    60% {
        left: 280px;
        background-color: yellow;
    }
    80% {
        left: 425px;
        background-color: blue;
    }
    100% {
        left: 0px;
        background-color: pink;
    }
}

常用属性

属性 描述 CSS Demo
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 单位s或ms 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
其他还有：
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
- steps(int, start/end)
- cubic-bezier(n,n,n,n): 三次贝塞尔
 3
animation-delay 规定动画何时开始。默认是 0。 3 negative-animation-delay

负值 animation-delay —— 进阶
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3

源码

示例01：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation.html

示例02：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_2.html

示例03  running hourse：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_3.html

steps(int, start|end) 算是 step-start 和 step-end 的进化型, 

因为只走了 一步  ，如果我们把int步数增加，就会看到每个关键影格之间多了一些演算出来的影格，当然如果步数设定越多，看到的动画也会越流畅。 （但需要这样，不用step就好了）
比如： 如果把上面的 step-start 改成 steps(3, start) , step-end 改成 steps(3,end) 会得到下面的结果
https://codepen.io/AlexZ33/pen/PowpKLb

如果熟练 steps 的用法，就能够很简单的使用 sprite 图片来做动画，什麽是 sprite 图片 呢？就是将许多图案集合成一张图，接著透过 CSS 的语法使这些图案分别呈现在网页裡，这样就能大幅减少多张图片载入的 request 数量。


上图是一张经典的 sprite 图片 ( Leland Stanford 所拍摄 )，只要透过 CSS 动画的 steps，我们也能很简单的让图片中的马儿跑起来。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css动画 示例3 running hourse | https://alexz33.github.io/</title>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    div {
      display: block;
    }

    #hourse {
      width: 186px;
      height: 141px;
      position: absolute;
      background-image: url("image/hourse.jpg");
      animation-name: run;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: step-start;
    }

    @keyframes run {
      0% {
        background-position: -15px -13px;
      }

      6.25% {
        background-position: -210px -13px;
      }

      12.5% {
        background-position: -403px -13px;
      }

      18.75% {
        background-position: -592px -13px;
      }

      25% {
        background-position: -15px -165px;
      }

      31.25% {
        background-position: -210px -165px;
      }

      37.5% {
        background-position: -403px -165px;
      }

      43.75% {
        background-position: -592px -165px;
      }

      50% {
        background-position: -15px -320px;
      }

      56.25% {
        background-position: -210px -320px;
      }

      62.5% {
        background-position: -403px -320px;
      }

      68.75% {
        background-position: -592px -320px;
      }

      75% {
        background-position: -15px -470px;
      }

      81.25% {
        background-position: -210px -470px;
      }

      87.5% {
        background-position: -403px -470px;
      }

      93.75% {
        background-position: -592px -470px;
      }

      100% {
        background-position: -592px -470px;
      }
    }
  </style>
</head>

<body>
  <div id="hourse">
  </div>
</body>

</html>

示例04： marriage-proposal：

僵尸行走

zoobie.gif

源码： https://gitee.com/turingitclub/css-learning/tree/dev/task04/zoombieWalking

酷炫3D动画 （旋转的正方体）

源码： https://codepen.io/AlexZ33/pen/yLyzWwo

炫酷页面开发（轮播图）

酷炫页面开发（3D 视频展示区）

transform3D.gif
代码 ： https://codepen.io/AlexZ33/pen/zYxNVzw

css-only-dropdown-menu

dropmenu.gif

源码 ： https://gitee.com/turingitclub/css-learning/blob/dev/task04/css-only-dropdown/index.html

CSS-only-tooltip

image.png

源码  ： https://gitee.com/turingitclub/css-learning/blob/dev/task04/CSS-only-Tooltip/index.html

漂亮ToolTips效果

CSS响应式设计

Viewport

什么是 Viewport?

viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

以下实例演示了使用viewport和没使用viewport在移动端上的效果：

实例1、没有添加 viewport：点击查看

image.png
image.png
代码：https://gitee.com/turingitclub/css-learning/blob/dev/base/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/example_withoutviewpoint.html 

实例2、添加 viewport：点击查看
image.png

如果你在平板电脑或手机上访问，可以直接点击查看效果。

代码：https://gitee.com/turingitclub/css-learning/blob/dev/base/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/example_withviewpoint.html
不同的地方在这里： 
image.png 

viewport视口

布局视口(layout viewport) 可视视口(visual viewport) //用户的缩放可以改变可视视口 理想视口(ideal viewport) //指布局视口在一个设备上的最佳尺寸 理想视口是为构建手机浏览器优化的页面而添加的

<meta name="viewport" content="width=device-width"/>

上面这句告诉设备要使用理想视口 ，理想视口的宽度作为布局视口的宽度（width定义布局视口的宽度 如果不指定  布局视口的宽度就是厂商的默认值）

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

最小缩放比例  最大缩放比例都为1  禁用了用户缩放

Media Query（媒体查询)

媒体(media)查询在W3CH CSS3 上有介绍：CSS3 @media 查询。
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
基础可以戳Ｗ3CH教程　响应式 Web 设计 – 媒体查询

下面我们对教程未详细提到的内容做个补充

Media Type

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media()的语句中包含的内容：
1、screen：这个不用说大家都知道，指的是一种媒体类型  -->  详情戳MDN文档；
2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性(Media Query)

@media all and (min-width:800px) and (origentation:landscape) {
  ...  
}

all 可以是 screen ,print.这是媒体类型可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

页面中引入媒体类型方法也有多种：

1、link方法引入

<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

2、xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3、@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在>/head>中的中引入，单这种使用方法在ie6-7都不被支持 如
样式文件中调用另一个样式文件：

@import url("css/reset.css") screen;
@import url("css/print.css") print;

在>/head>中的中调用：以上几种方法都有其各自的利弊，在实际应用中建议使用第一种和第四种，因为这两下面我们对教程未详细提到的内容做个补充

<head>
 <style type="text/css">
 @import url("css/style.css") all;
 </style>
 </head>

4、@media引入
这种引入方式和@import是一样的，也有两种方式：
样式文件中使用：

@media screen{
     选择器{

        属性：属性值；
     }
   }

在>/head>中的中调用：

 <head>
    <style type="text/css">
 @media screen{
           选择器{
      属性：属性值；
    }
 }
    </style>
  </head>

以上几种方法都有其各自的利弊，在实际应用中建议使用第一种和第四种，因为这两下面我们对教程未详细提到的内容做个补充种方法是在项目制作中是常用的方法，对于他们的具体区别

Media Query

前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

转换成css中的写法为：

@media screen and (max-width: 600px) {
    选择器 {
      属性：属性值；
    }
  }

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){…}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：
1、Media query只接受单个的逻辑表达式作为其值，或者没有值；
2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况
4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

@media not screen and (color),print and (color)

@media not screen and (color) or print and (color)

@media (not(screen and (color))), print and (color)

//上面三个等价
//加了not有效范围只到逗号

第一个，如果是老浏览器不支持媒体查询，只解析到only，老浏览器是不会应用后面的样式的 因为没有叫only的设备
第二个，不管后面的媒体查询样式怎么写，对于老的浏览器来说，都会应用这样一段样式，因为它已经把后面的逻辑表达式忽略掉了，它的值永远为真。

注意: 一般我们在对某个设备需要用媒体查询时候最好带上only 除非不需要兼容老浏览器

css3主要的媒体属性

响应式设计的断点

/*-----------iphone 4 and 4s -------------*/

/*  Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio:2){}
/*--------------iphone5 and 5s --------------*/

/* Portrait and Landscape */

@media only screen 
   and (min-device-width:320px)
   and (max-device-width:568px)
   and (-webkit-min-device-pixel-ratio:2){

   }

以上这种 **针对特定设备来做样式选择*** 做法不推荐，除非特例

要对屏幕类型

image.png

以上是常用的Media Query

这篇文章有对标准的各个标准设备总结Media Queries for Standard Devices

图片（Responsive Images）

视频

框架

image2019-9-13_7-39-35.png

精灵图

响应式网站设计原则

responsive.gif

项目内有文档

https://gitee.com/turingitclub/css-learning/tree/dev/task05/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%BC%80%E5%8F%91

【拓展】CSS标准学习

CSS标准列表：http://www.w3.org/Style/CSS/current-work
学习目标：8周完成以下CSS标准的学习

学习进度：

拓展阅读

  1. CSS媒体查询
  2. Media Queries for Standard Devices
  3. REM vs EM – The Great Debate
  4. 在 @media 中，px、em、rem 用哪个比较好？
  5. 不使用 Media Queries 的自适应 CSS
  6. 根据各种不同的 media 属性，调试 CSS 效果
  7. css transition
  8. transition in css-trick
  9. 完整解析 CSS 動畫 ( CSS Animation )
  10. CSS-TRICKS animation
  11. CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More
  12. Cubic Bezier Generator : 
    1. https://cubic-bezier.com/#.17,.67,.83,.67
    2. http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67
    3. 算法： Bezier curve
  13. linear-gradient()
  14. W3C教程CSS教程
  15. https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/