美文网首页
10-CSS3新特性

10-CSS3新特性

作者: magic_pill | 来源:发表于2017-09-05 08:03 被阅读52次

    CSS3简介

    CSS3的现状

    1. 浏览器支持程度差,需要添加<a href="#abc">私有前缀</a>;
    2. 移动端支持优于PC端;
    3. 不断改进中;
    4. 应用相对广泛,-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::beforeE::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);
    }
    

    边框

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

    边框圆角

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

    边框阴影

    box-shadowtext-shadow用法差不多.

    1. 水平偏移量,正值向右,负值向左;
    2. 垂直偏移量,正值向下,负值向上;
    .box{
            box-shadow: 5px 5px 5px 27px red, -5px -5px 5px -5px green;
    }
    
    1. 模糊度是不能为负值;
    2. 阴影大小;
    3. 阴影颜色;
    4. inset可以设置内阴影;
    .box{
        box-shadow:inset 5px 5px 5px 5px red,inset -5px -5px 5px -5px green;
    }
    

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

    边框图片(了解)

    1. border-image:设置边框的背景图片;
    border-image: url("images/border.png") 27/20px round
    
    • 盒子的总宽高不会改变;
    1. border-image-source:url(""):设置边框图片的地址;
    2. border-image-slice:27,27,27,27:裁剪图片,如何去裁切图片,浏览器会自动去裁剪图片;
    3. border-image-width:20px;:指定边框的宽度;
    4. 边框平铺的样式:border-image-repeat: stretch;
    5. stretch,拉升;
    6. round:平铺,会自动调整缩放比例(如果谷歌版本很高可能会出现问题);
    7. repeat(重复):正常平铺,但是可能会显示不完整。
    • 设置的图片将会被“切割”成九宫格形式,然后进行设置:
    1. “切割”完成后生成虚拟的9块图形,然后按对应位置设置背景,
    2. 其中四个角位置、形状保持不变,中心位置水平垂直两个方向平铺;
    • 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;
        }
    }
    
    1. 必要的元素:
    • 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有两种写法

    1. 作为一个属性,设置给父元素,作用于所有3D转换的子元素;
    2. 作为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);
    
    • 关键属性
    1. 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;

    • 明确主侧轴及方向;

    • 可互换主侧轴,也可改变方向。

    各属性详解
    1. 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新特性

          本文链接:https://www.haomeiwen.com/subject/wsayjxtx.html