CSS 3 新特性

新增选择器

属性选择器

  根据元素特定属性来选择元素。这样就不用借助于类或者id选择器。

结构伪类选择器

  根据文档结构来选择元素，常用于根据父级选择器里面的子元素

注:nth-child(n)可以是数字，关键字和公式。关键字even偶数，odd奇数

伪元素选择器

盒子模型

不能单独使用，这是声明需要写到选择器里面去！

CSS 3 过度（重点）

transition:要过度的属性 花费时间 运动曲线 何时开始

        div {

            width: 100px;

            height: 100px;

            margin: auto;

            background-color: greenyellow;

            transition: width 2s ease 0s, height 2s ease 0s;

        }

       

        div:hover {

            width: 600px;

            height: 600px;

        }

2D转换

translate（位移）

rotate（旋转）

  可以与过度一起使用，或者制作字体三角形

origin（设置旋转中心点）

scale（缩放）

注：2D转换综合写法

transform:位移 旋转 缩放（注意顺序）

 

动画（animation）

可以实现比过渡更复杂的效果，如自动播放

1 定义动画

2 调用动画

3 动画序列

        div {

            width: 100px;

            height: 100px;

            background-color: greenyellow;

            /* 调用定义的动画 */

            animation-name: move;

            /* 持续时间 */

            animation-duration: 5s;

        }

        /* 定义动画 */

       

        @keyframes move {

            /* @keyframes 关键帧的意思 */

            /* 里面设置动画序列 */

            0% {

                transform: translate(0, 0);

            }

            25% {

                transform: translate(1000px, 0);

            }

            50% {

                transform: translate(1000px, 600px);

            }

            75% {

                transform: translate(0, 600px);

            }

            100% {

                transform: translate(0, 0);

            }

        }

动画属性

动画简写属性

  animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始结束的状态。

速度曲线细节

3D转换

3D位移：translate3d(x,y,z)

3D旋转：rotate3d(x,y,z)

左手法则：拇指是旋转轴，其余四指弯曲方向是正值

  transform：rotateX(45deg)

  transform：rotateY(45deg)

  transform：rotateZ(45deg)

  transform：rotat3d(x,y,z,deg)

透视：perspective

3D呈现：transfrom-style（重要）

旋转导航栏

        ul {

            margin: 100px;

        }

        ul li {

            list-style: none;

            width: 200px;

            height: 35px;

            /* 透视一定需要找旋转父级 */

            perspective: 400px;

        }

        .box {

            position: relative;

            width: 100%;

            height: 100%;

            /* 保持子盒子3D效果 */

            transform-style: preserve-3d;

            transition: all 1s;

        }

        .front {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

        }

        .bottom {

            /* 两盒子重叠 */

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

        }

        .front {

            background-color: palegreen;

            z-index: 1;

            /* 前面前移构成正方体 */

            transform: translateZ(17.5px);

        }

        .bottom {

            background-color: orange;

            /* 底面向前倒90度 */

            /* 缩写必须位移写在前面 */

            transform: translateY(17.5px) rotateX(-90deg);

        }

        .box:hover {

            transform: rotateX(90deg);

        }

浏览器私有前缀