10-CSS3新特性

2017-09-05 本文已影响52人 magic_pill

CSS3简介

CSS3的现状

浏览器支持程度差，需要添加<a href="#abc">私有前缀</a>；
移动端支持优于PC端；
不断改进中；
应用相对广泛，-webkit-border-radius(radius 半径)。

要遵循渐进原则。

准备工作

环境准备

由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。
Chrome浏览器 version 46+
Firefox浏览器 firefox 42+

如何使用手册

程序开发是一个不断学习的过程，学会使用工具，可以让我们事半功倍。
[]：表示全部可选项 padding
||：1个或者更多；
|：多选一；
?：表示0个或者1个；
*：表示0个或者多个；
{}：表示范围。
注：学习过程中一定要学会查看手册，培养自主学习能力。

基础知识

选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
之前学过的选择器：
- div{}：标签选择器；
- .box{}：类选择器；
- #box：id选择器；
- div p：后代选择器；
- div.box：交集选择器；
- div,p,span：并集选择器；
- div>p：子代选择器；
- *：通配符；
- div+p：选择div后面的第一个兄弟p（p必须要紧跟在div之后）；
- div~p：选中div后面所有的兄弟p。

属性选择器:`[]`

其特点是通过属性来选择元素，具体有以下5种形式：
E[attr]，表示存在attr属性即可：div[title]：表示页面中带有title属性的div；
E[attr=val]表示属性值完全等于val：div[class=mydemo]；
E[attr*=val]表示的属性值里包含val字符并且在“任意”位置：div[class*=mydemo];
E[attr^=val]表示的属性值里包含val字符并且在“开始”位置：div[class^=mydemo]；
E[attr $=val]表示的属性值里包含val字符并且在“结束”位置：`div[class$ =demos]`；
案例：配合jQuery 的过滤选择器

伪类选择器

除了以前学过的:link、:visited、:hover、:active、:focus，CSS3又新增了其它的伪类选择器。
以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类。
重点理解通过E来确定元素的父元素；
所选到的元素的类型，必须是指定的类型E，否则无效。
E:first-child：第一个子元素；
E:last-child：最后一个子元素；
E:nth-child(n)：第n个子元素，编号从1开始，计算方法是元素E的全部兄弟元素；

//第三个元素
div>ul>li:nth-child(3){
        color: deeppink;
}

E:nth-last-child(n)同E:nth-child(n) 相似，只是倒着计算；

div>ul>li:last-child(2){
        color: deeppink;
}

- n遵循`线性变化`，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。
- 选中所有的奇数的li：`括号中的表达式形式必须是n在前`

li:nth-child(2n-1){
        color: red;
}

- 选中所有的7的倍数的li：

li:nth-child(7n){
        color: red;
}

- 选中前面五个：

li:nth-child(-1n+5){
        color: red;
}

选中后面五个：

li:nth-last-child(-1n+5){
        color: red;
}

所有的偶数

li:nth-child(even){
        color:red
}

所有的奇数

li:nth-child(odd){
        color:blue;
}

- n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
- 案例：日历图。

E:empty：选中没有任何子节点的E元素（使用不是非常广泛），没有任何的子元素，包括空格，即元素为空的状态。
目标伪类：E:target结合锚点进行使用，处于当前锚点的元素被选中，表示元素被激活的状态；

<li><a href="#title1">CSS (层叠样式表)</a></li>
<h2 id="title1">CSS (层叠样式表)</h2>
h2:target{
    color:red;
}

点击章节进行相应跳转变色。

伪元素选择器

伪元素：
重点：E::before、E::after，是一个行内元素，需要转换成块元素；
E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理，必须要有content，否则无法显示。E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解。

.box::before{
    content:"今天";
}
.box::after{
    content:"真好";
}

伪元素选择器：
E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；
案例：首字下沉
E::first-line，文本第一行；
E::selection，选中的文本，可以根据这个效果去更改选中区域的样式（可以更改背景颜色和文字颜色，但是不能改变字体大小）；
":"与"::"区别在于区分伪类和伪元素
关于before和after：
CSS2中，E:before或者E:after，是属于伪类的，并且没有伪元素的概念；
CSS3中，提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者E:after伪类。

颜色

一种新的颜色的表示方式：rgba(255,0,0,0.1)，RGBA是代表Red（红色）、Green（绿色）、Blue（蓝色）和Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间。
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA；
R、G、B 取值范围0~255。
Hue、Saturation、Lightness、Alpha即HSLA；
H：色调，取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色；
S：饱和度，取值范围0%~100%；
L：亮度，取值范围0%~100%；
A：透明度，取值范围0~1。
关于透明度：
opacity，只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度（此时不能再设置子盒子的透明度）；
transparent，可以单独设置透明度，但是不可调节透明度，始终完全透明；
RGBA、HSLA可应用于所有使用颜色的地方。
案例：
opacity，设置透明度，只能针对整个盒子设置透明度，子盒子会继承父盒子的透明度。

.out{
        width: 200px;
        height: 200px;
        background: green;
        border: 1px solid darkgreen;
        margin: 40px auto;
        opacity: 0.3;
}

子盒子也出现透明

.out .inner{
        width: 100px;
        height: 100px;
        background-color: yellow;
}

background-color: transparent，完全透明，不可调节透明度.
使用rgba来控制颜色，相对opacity ，不具有继承性。

文本 (shadow阴影)

text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。

水平偏移量，正值向右，负值向左；
垂直偏移量，正值向下，负值向上；
模糊度不能为负值，值越大越模糊；
颜色，设置对阴影的颜色，可以有多个影子。
代码演示：

// 3px，水平偏移量。正值向右  负值向左
//5px，垂直偏移量，正值向下 负值向上
//5px，模糊度，模糊度不能为负值，值越大越模糊
//#ccc，设置对象阴影的颜色。可以有多个影子.
ul>li{
    margin: 20px;
    font-size: 24px;
}
ul>li:nth-child(1){
    text-shadow: 5px 5px 2px #ccc;
}
ul>li:nth-child(2){
     text-shadow: -5px  -5px 2px #ccc;
}
ul>li:nth-child(3){
    text-shadow: 5px 5px 2px #ccc, -5px  -5px 2px #ccc;
}

案例：浮雕文字.

/*设置背景色.*/
body {
    background-color: gray;
    font: bold 6em "microsoft yahei";
}
div {
    margin: 30px;
    color: #808080;
    text-align: center;
}
/*设置水平向左1px 向上1 px   向右1px 向下1px */
.to{
    text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
.ao{
    text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}

盒模型

CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
box-sizing有两个值:content-box、border-box。可以分成两种情况：
content-box:外加模式，对象的实际宽度等于设置的width值和border、padding之和；
border-box：内减模式，对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )，我们把这种方式叫做盒模型。
默认是外加模式。
兼容性比较好。
练习：图片展示（内减模式）

<span id="abc">浏览器私有化前缀：</span>

谷歌、Safari浏览器内核：-webkit-；
火狐浏览器内核：-moz-；
IE浏览器内核：-ms-；
欧鹏浏览器内核：-o-；

.box{
    width:200px;
    height:200px;
    border:1px solid #000;
    /*background:linear-gradient(left,red,blue);*/
    /*以上属性，一般的浏览器都不支持，加上对应的前缀即可被相应的浏览器识别，如下*/
    background:-webkit-linear-gradient(left,red,blue);
    background:-moz-linear-gradient(left,red,blue);
    background:-ms-linear-gradient(left,red,blue);
    background:-o-linear-gradient(left,red,blue);
}

边框

边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，需要重点掌握。

边框圆角

border-top-radius：每个角可以设置两个值，第一个值x值是水平方向上的值，第二个y值是垂直方向上的值；
border-radius:可以有一个值、两个值、三个值、四个值，还可以用“/”分割横坐标和纵坐标的值；赋值顺序，从左上顺时针进行赋值，如果没有值就取对角的值；
边框圆角处理、正方形、扇形；
椭圆，圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。
以“/”进行分隔，可分别设置长、短半径，遵循顺时针规则，左上角为1，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置）

border-radius:40px 50px 20px 40px / 10px 10px 10px 10px;

边框阴影

box-shadow与text-shadow用法差不多.

水平偏移量，正值向右，负值向左；
垂直偏移量，正值向下，负值向上；

.box{
        box-shadow: 5px 5px 5px 27px red, -5px -5px 5px -5px green;
}

模糊度是不能为负值；
阴影大小；
阴影颜色；
inset可以设置内阴影；

.box{
    box-shadow:inset 5px 5px 5px 5px red,inset -5px -5px 5px -5px green;
}

7 注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感。

边框图片（了解）

border-image：设置边框的背景图片；

border-image: url("images/border.png") 27/20px round

盒子的总宽高不会改变；

border-image-source:url("")：设置边框图片的地址；
border-image-slice:27,27,27,27：裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片；
border-image-width:20px;：指定边框的宽度；
边框平铺的样式：border-image-repeat: stretch;
stretch，拉升；
round：平铺，会自动调整缩放比例（如果谷歌版本很高可能会出现问题）；
repeat(重复)：正常平铺，但是可能会显示不完整。

设置的图片将会被“切割”成九宫格形式，然后进行设置：

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺;

round和repeat之间的区别:
round会自动调整尺寸，完整显示边框图片。
repeat单纯平铺多余部分，会被“裁切”而不能完整显示。
更改裁切尺寸:

background-slice: 34 36 27 27

关于边框图片重点理解9宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活运用会给我们带来不少便利。

案例：用css 实现

渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变

线性渐变（gradient 变化，属于背景图片里）

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
例如从黄色水平渐变到绿色：

background-image:linear-gradient(
    to right, 表示方向 (left,top,right,left ,也可以使用度数)
    Yellow,  渐变起始颜色
    Green   渐变终止颜色
)

background:linear-gradient(
      to right,
      red 0%, red 25% ,
      blue 25%,blue 50%,
      green 50%,green 75%,
      pink 75% ,pink 100%
);  //前一个是起始颜色，后一个是终止颜色，百分比为占总长度的百分比

.box6{
    width: 600px;
    height: 150px;
    background: linear-gradient(135deg,#000 0%, #000 10%, #fff 10%, #fff 20%,#000 20%, #000 30%, #fff 30%, #fff 40%,#000 40%, #000 50%, #fff 50%, #fff 60%,#000 60%, #000 70%, #fff 70%, #fff 80%,#000 80%, #000 90%, #fff 90%, #fff 100%);
    animation: gun 5s linear infinite;
    background-size: 100px 150px;
}
@keyframes gun {
    from{

    }
    to{
        background-position: 100px 0px;
    }
}

必要的元素：

a、方向
b、起始颜色
c、终止色；
方向：垂直向上为0度，顺时针逐渐增大。

径向渐变 (radial 径向)

radial-gradient：径向渐变指从一个中心点开始，沿着四周产生渐变效果：

background: radial-gradient(
    150px  at  center,
    yellow,
    green
);

围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变。
必要的元素：
a、中心点，即圆的中心(中心点的位置是以盒子自身)

background: radial-gradient(
        150px  at left center,
        yellow,
        green
);

以左上角为圆的中心点

background: radial-gradient(
        150px  at 0px  0px,
        yellow,
        green
);

b、渐变起始色
c、渐变终止色
关于中心点：中心位置参照的是盒子的左上角；
关于辐射范围：其半径可以不等，即可以是椭圆；

div{
     width: 300px;
     height: 300px;
     margin:100px auto;
     background: radial-gradient(
         250px  at 0px 0px,
         yellow,
         green
     );
     border-radius: 150px;
}

背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
background-size:width,height,可以设置背景图片的宽度以及高度。

background-size设置背景图片的尺寸

background-size:600px auto;：自动是适应盒子的宽度；
background-size:100% 100%;：通过百分比设置背景图片大小；
通过具体数值来调整背景的尺寸：background-size: 100px 100px;。
cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏，图片有可能不完整显示。
contain：会自动调整缩放比例，保证图片始终完整显示在背景区域；但是不保证铺满盒子，也可以使用长度单位或百分比。
案例:全屏背景自动适应。

background-origin(原点，起点)设置背景定位的原点

所谓的背景原点就是调整背景位置的一个参照点，调整背景图片定位的参照原点。
border-box以边框做为参考原点；
padding-box以内边距做为参考原点(默认值)；
content-box以内容区做为参考点。

background-clip设置背景区域clip(裁切)

border-box裁切边框以内为背景区域，边框外边缘；
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域；

以逗号分隔可以设置多背景，可用于自适应局

背景图片尺寸在实际开发中应用十分广泛。

案例：

相框；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相框</title>

    <style>
        .album{
            width: 623px;
            height: 417px;
            border: 1px solid #000;
            background:
                url("images/bg1.png") no-repeat,
                url("images/bg2.png") no-repeat right top,
                url("images/bg3.png") no-repeat right bottom,
                url("images/bg4.png") no-repeat bottom left,
                url("images/bg5.png") no-repeat center;
            font: 700 60px/400px "Microsoft Yahei";
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="album">永垂不朽</div>
</body>
</html>

手机界面。
如果有背景颜色，必须加载最后一个url后面。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相框</title>

    <style>
        .phone{
            width: 639px;
            height: 800px;
            border: 1px solid #000;
            margin: 20px auto;
            background: url("images/head.jpg") no-repeat top,url("images/foot.jpg") no-repeat bottom,rgb(45,0,130);
        }
    </style>
</head>
<body>
        <div class="phone"></div>
</body>
</html>

过渡(transition)`重点`

Transition:param1 param2
param1：要过渡的属性；
param2：过渡的时间。
过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果；
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态；
帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

相关属性：
transition-property设置过渡属性；，默认值为all；
transition-duration设置过渡时间，
transition-timing-function设置过渡的动画类型，linear(匀速)、ease-in (由慢到快)、ease（平滑过渡，默认值）；
transition-delay设置过渡延时，过了多长时间后执行动画。

案例：

气泡

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气泡</title>

    <style>
        .paopao{
            width: 350px;
            height: 150px;
            border: 1px solid #000;
            margin: 20px auto;

            background: url("images/paopao.png") no-repeat top left,url("images/paopao.png") no-repeat right bottom;
            background-color: #000;

            transition: 3s linear;
        }

        .paopao:hover{
            background-position: bottom left,right top;
        }
    </style>
</head>
<body>
    <div class="paopao"></div>
</body>
</html>

商品列表

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框阴影</title>

    <style>
        body{
            background-color: #ddd;
        }
        .items{
            margin: 30px auto;
            width: 1250px;
            height: 300px;
        }

        .item{
            float: left;
            width: 230px;
            height: 300px;
            margin-right: 20px;
            text-align: center;
            background-color: #fff;
            position: relative;
            overflow: hidden;

            transition: 0.5s linear;
        }
        .pic{
            margin-top: 30px;
        }
        .desc{
            height: 60px;
            width: 100%;
            background-color: #f90;
            bottom: -60px;
            position: absolute;
            transition: 0.5s linear;
        }

        .item:hover{
            box-shadow: 0 0 18px #999;
            top: -5px;
        }
        .item:hover .desc{
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="items">
        <div class="item">
            ![](images/1.jpg)
        </div>
        <div class="item">
            ![](images/2.jpg)
            <div class="desc"></div>
        </div>
        <div class="item">
            ![](images/3.jpg)
            <div class="desc"></div>
        </div>
        <div class="item">
            ![](images/4.jpg)
            <div class="desc"></div>
        </div>
        <div class="item">
            ![](images/5.jpg)
            <div class="desc"></div>
        </div>
    </div>
</body>
</html>

手风琴效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>

    <style>
        .accordion{
            margin: 60px auto;
            width: 400px;

        }
        .sec{
            border-bottom: 1px solid #00f;
            background-color: #993;
            transition: 0.5s linear;
        }
        .title{
            height: 30px;
            line-height: 30px;
            margin-left: 20px;
        }
        .con{
            height: 0;
            background-color: transparent;
            transition: 0.5s linear;
        }
        .sec:last-child{
            border-bottom: none;
        }

        .sec:hover{
            background-color: #9f3;
        }
        .sec:hover .con{
            height: 200px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="accordion">
        <div class="sec">
            <div class="title">新闻标题</div>
            <div class="con"></div>
        </div>
        <div class="sec">
            <div class="title">新闻标题</div>
            <div class="con"></div>
        </div>
        <div class="sec">
            <div class="title">新闻标题</div>
            <div class="con"></div>
        </div>
        <div class="sec">
            <div class="title">新闻标题</div>
            <div class="con"></div>
        </div>
    </div>
</body>
</html>

2D转换`重点`

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合刚学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3d 转换,其中2d 有：缩放、移动、旋转。
移动translate(x,y)可以改变元素的位置，x、y可为负值，移动位置相对于自身原来位置；
x，在水平方向移动；
y，在垂直方向移动；
如果只有一个参数，默认为水平方向;
除了可以是像素值，也可以是百分比，相对于自身的宽度或高度。
缩放scale(x,y)可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值，大于1时为放大，小于1时为缩小。
旋转rotate(45deg)，可以对元素进行旋转，正值为顺时针，负值为逆时针。
当元素旋转以后，坐标轴也跟着发生转变；
调整顺序可以解决，把旋转放到最后。
倾斜：skew(deg,deg)可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0；
第一个值为水平方向上倾斜的角度；
第二个值为垂直方向上倾斜的角度
矩阵：matrix()把所有的2D转换组合到一起，需要6个参数（了解）。
transform-origin：可以调整元素转换的原点。
我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale(); ...等，其顺序会影响转换的效果。

案例

盒子水平居中对齐；

.box{
    //距父盒子左侧距离为父盒子宽度一半
    margin-left:50%;
    //往左侧移动自身宽度的一般
    transform:translate(-50%);
}

火箭移动;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小火箭</title>

    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: rgb(229,175,97);
        }

        img{
            position: absolute;
            left: 100px;
            bottom: 0;
            width: 80px;
            border: 1px solid #000;
            transform: translate(0px,150px) rotate(45deg);
            transition: all 1s;
        }
        body:hover img{
            transform: translate(600px,-300px) rotate(90deg);
        }
    </style>
</head>
<body>
    ![](images/rocket.png)
</body>
</html>

盾牌，将位置还原

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盾牌</title>

    <style>
        body{
            background-color: #000;
        }
        .shield{
            margin:60px auto;
            width: 420px;
        }

        img{
            transition: 0.3s;
        }
        img:nth-child(1){
            transform: translate(-184px,-52px) rotate(45deg);
        }
        img:nth-child(2){
            transform: translate(0px,-50px) rotate(0deg);
        }
        img:nth-child(3){
            transform: translate(52px,30px) rotate(45deg);
        }
        img:nth-child(4){
            transform: translate(-52px,30px) rotate(-45deg);
        }
        img:nth-child(6){
            transform: translate(152px,30px) rotate(45deg);
        }
        img:nth-child(7){
            transform: translate(-72px,30px) rotate(45deg);
        }
        img:nth-child(8){
            transform: translate(0px,50px) rotate(0deg);
        }
        img:nth-child(9){
            transform: translate(40px,50px) rotate(-30deg);
        }

        .shield:hover img{
            transform: none;
        }
    </style>
</head>
<body>
    <div class="shield">
        ![](images/shield_1_01.png)
        ![](images/shield_1_02.png)
        ![](images/shield_1_03.png)
        ![](images/shield_1_04.png)
        ![](images/shield_1_05.png)
        ![](images/shield_1_06.png)
        ![](images/shield_1_07.png)
        ![](images/shield_1_08.png)
        ![](images/shield_1_09.png)
    </div>
</body>
</html>

旋转原点:transform-origin:left top;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对话框</title>

    <style>
        div{
            /*border: 1px solid #000;*/
            background-color: pink;
        }

        .bigBox{
            width: 200px;
            height: 60px;
            margin-top: 40px;
            position: relative;
        }
        .smallBox{
            width: 40px;
            height: 40px;
            position: absolute;
        }

        .sBox1{
            left: 50%;
            transform: translate(-50%);
            transform: rotate(45deg);
            transform-origin: left top;
            top: -10px;
        }
        .sBox2{
            right: 0;
            top: 10px;

            transform: translateY(-50%);
            transform: rotate(45deg);
        }
        .sBox3{
            left: 50%;
            transform: translate(-50%);
            transform: rotate(45deg);
            transform-origin: left top;
            bottom: 10px;
        }
        .sBox4{
            top: 10px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>

    <div class="box1 bigBox">
        <div class="sBox1 smallBox"></div>
    </div>
    <div class="box2 bigBox">
        <div class="sBox2 smallBox"></div>
    </div>
    <div class="box3 bigBox">
        <div class="sBox3 smallBox"></div>
    </div>
    <div class="box4 bigBox">
        <div class="sBox4 smallBox"></div>
    </div>
</body>
</html>

扑克牌
心形

3D转换

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
CSS中的3D坐标系：
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度。
借助示例理解3D转换：
1. 绕X轴旋转;
2. 绕Y轴旋转;
3. 绕Z轴旋转;
4. 在X轴移动;
5. 在Y轴移动;
6. 在Z轴移动。

左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

透视（perspective）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的，并不是真正的3D。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法

作为一个属性，设置给父元素，作用于所有3D转换的子元素；
作为transform属性的一个值，做用于元素自身(使用较少)。

<div class="b1" transform="perspective:30px">

理解透视距离:
透视会产生“近大远小”的效果.

案例：

音乐盒；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D</title>

    <style>
        body{
            background: #ccc;
        }
        div:nth-child(1){
            width: 300px;
            height: 300px;
            margin: 40px auto;

            position: relative;
        }

        div:nth-child(1)::before,div:nth-child(1)::after{
            content: "";
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            background: url("images-3D/musict.jpg") no-repeat;
            border-radius: 50%;
            transition: all 3s;
            transform-origin: bottom;
        }

        div:nth-child(1)::before{
            background: url("images-3D/musicb.jpg");
        }

        div:nth-child(1):hover::after{
            transform: rotateX(180deg);
        }
    </style>
</head>
<body>
    <div></div>
    <audio src="images-3D/style.mp3" loop></audio>

    <script>
        var open = document.querySelector("div:nth-child(1)");
        var music = document.querySelector("audio");
        open.onmousemove = function () {
            music.play();
        };
        open.onmouseleave = function () {
            music.pause();
        }
    </script>
</body>
</html>

百度钱包；
设置元素背面是否可见：backface-visibility;；
翻转的文字；
通过伪元素来获取自定义属性的值：attr(data-text);
3D导航；
立体导航栏。

3D呈现（transform-style）

设置内嵌的元素在3D空间如何呈现，这些子元素必须为转换原素.
flat：所有子元素在 2D 平面呈现;
preserve-3d：保留3D空间;
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:preserve-3d来使其变成一个真正的3D图形。

案例：

立方体;
3D导航；
立体导航条

动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
必要元素：
通过@keyframes指定动画序列；
通过百分比将动画序列分割成多个节点；
在各节点中分别定义各属性
通过animation将动画应用于相应元素；
使用：
类似js中的函数：先定义，再调用；
定义动画：

@keyframes 动画名{
        from{初始状态}
        to{结束状态}
}

定义多组动画：

@keyframes move{
        0%{}
        25%{}
        50%{}
        75%{}
        100%{}
}

调用：
- 基本调用方式：

animation: 动画名称 持续时间 (执行次数：3，infinite);

关键属性

animation-name：设置动画序列名称；

animation-duration动画持续时间；
animation-delay动画延时时间；
animation-timing-function动画执行速度（运动曲线）：linear、ease等；
animation-play-state动画播放状态，running、paused等；
animation-direction动画的方向：normal正常，alternate可逆等；
animation-fill-mode动画执行完毕后状态：forwards（结束后保持结束时的状态）、backwards（结束后保持开始时候的状态）等；
animation-iteration-count动画执行次数：可以是具体数字或者inifinate等；
steps(60) 表示动画分成60步完成。
参数值的顺序：关键几个值，除了名字、动画时间、延时有严格顺序要求，其它随意。

案例

捕鱼达人；
太阳系；
全屏切换；
钟表；
大海波涛；
无缝滚动。

伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
学习新的概念：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向；
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的；
方向：默认主轴从左向右，侧轴默认从上到下；
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
必要元素：
指定一个盒子为伸缩盒子 display: flex;；
设置属性来调整此盒的子元素的布局方式，例如：flex-direction；
明确主侧轴及方向；
可互换主侧轴，也可改变方向。

各属性详解

flex-direction调整主轴方向（默认为水平方向）该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置：

row，水平方向；
reverse-row，反转(也反序)，从最右边开始向左排列，顺序发生改变，从最右边开始；
column，垂直方向；
reverse-column 反转列。
justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式：
flex-start，起点对齐；
flex-end，终点对齐，顺序不变；
center，中间对齐；
space-around，环绕（自动平分空白区域）；
space-between，两端对齐（中间空白区域自动平分）。
flex：多个子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配；
align-items设置或检索弹性盒子元素在侧轴（竖轴）方向上的对齐方式：
flex-start，起点对齐；
flex-end，终点对齐；
center，居中对齐；
stretch，拉伸。
flex-wrap控制是否换行；

案例

微信底部；
携程；

多列布局

类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。

/* 分几列*/
-webkit-column-count:3;
/* 分割线*/
-webkit-column-rule:1px dashed red;
/*设置列间距*/
-webkit-column-gap:60px;
/* 列宽度*/
-webkit-column-width: 400px;

如果给标题设置跨列等属性：

-webkit-column-span:all;
text-align:center;

了解即可，实际意义不大。

案例

新闻

Web字体

开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。支持程度比较好，甚至IE低版本浏览器也能支持。

字体格式(认识字体)

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
TureType(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
Web Open Font Format(.woff)格式
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
下载字体网站：推荐http://www.zhaozi.cn/ 和 http://www.youziku.com/ 查找更多中文字体。
如果要在网页中使用web字体（用户电脑上没有这种字体），具体使用步骤：
导入对应的字体包；
声明字体：告诉浏览器，去哪里找这个字体；
定义一个类，谁用这个类名，就会使用相应的字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web字体使用</title>

    <style>
        /*声明字体*/
        @font-face {font-family: 'webfont';
            src: url('font/webfont.eot'); /* IE9*/
            src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('font/webfont.woff') format('woff'), /* chrome、firefox */
            url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }

        /*定义对应的字体类*/
        .webfont{
            font-family:"webfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;}

    </style>
</head>
<body>

    <p class="webfont">寻寻觅觅，在无声无息中消失。。。</p>
    <p>寻寻觅觅，在无声无息中消失。。。</p>
</body>
</html>

字体图标

其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
将所有图标打包成字体库，减少请求；
具有矢量性，可保证清晰度；
使用灵活，便于维护；
Font Awesome 使用介绍：http://fontawesome.dashgame.com/
定制自已的字体图标库：http://iconfont.cn/ 和 https://icomoon.io/
SVG素材：http://www.iconsvg.com/
使用：
首先在阿里文字图片里面找到需要的图片，然后加载到本地，引入到项目中；
声明图标文字；
定义一个类；
在需要的地方使用这个类，要配合对应的图片编码（图片编码在demo中）使用。
需要什么图标查找对应的编码即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web字体使用</title>

    <style>
        /*声明字体*/
        @font-face {font-family: 'iconfont';
            src: url('iconfont/iconfont.eot'); /* IE9*/
            src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
            url('iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        /*定义对应的字体类*/
        .iconfont{
            font-family:"iconfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        span::before{
            content: "\e628";
            font-family: iconfont;
            color: red;
        }
    </style>
</head>
<body>
    <span>扫码取件</span>
    <p class="iconfont">&#xe628;</p>
</body>
</html>

兼容性

通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
我们需要知道每个属性，能被哪个版本的浏览器支持。

高级应用

360 案例:

监听滚轮

document.onmousewheel=function(){}

需要处理兼容（我们是靠监听滚轮的事件来处理的）;
我们需要使用到插件，(滚屏插件) 基于jQuery 的一个插件jQuery fullPage，全屏滚动插件，中文网址:http://www.dowebok.com；相关说明:http://www.dowebok.com/77.html
对应的颜色

sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6']

loopTop:true，滚到顶部,回到最后一屏；
js代码：

$(function(){
    $('#dowebok').fullpage({
        sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
        loopTop:true,
        afterLoad:function( anchorLink ,index){
            console.log(index);

            $('.section').removeClass('current');
            setTimeout(function(){
                $('.section').eq(index-1).addClass('current');
            },100);
        }
    });
});

10-CSS3新特性

CSS3简介

CSS3的现状

准备工作

环境准备

如何使用手册

基础知识

选择器

属性选择器:[]

伪类选择器

伪元素选择器

颜色

文本 (shadow阴影)

盒模型

<span id="abc">浏览器私有化前缀：</span>

边框

边框圆角

边框阴影

边框图片（了解）

渐变

线性渐变 （gradient 变化，属于背景图片里）

径向渐变 (radial 径向)

背景

background-size设置背景图片的尺寸

background-origin(原点，起点)设置背景定位的原点

background-clip设置背景区域clip(裁切)

以逗号分隔可以设置多背景，可用于自适应局

案例：

过渡(transition)重点

案例：

2D转换重点

案例

3D转换

左手坐标系

左手法则

透视（perspective）

案例：

3D呈现（transform-style）

案例：

动画

案例

伸缩布局

各属性详解

案例

多列布局

案例

Web字体

字体格式(认识字体)

字体图标

兼容性

高级应用

360 案例:

猜你喜欢

热点阅读

属性选择器:`[]`

线性渐变（gradient 变化，属于背景图片里）

过渡(transition)`重点`

2D转换`重点`