CSS3新增属性与选择器

1.CSS3选择器

1.1 属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性，且值以val开头的E元素
E[att$=“val”]	匹配具有att属性，且值以val结束的E元素
E[att*=“val”]	匹配具有att属性，且值中含有val结束的E元素

1.2 结构伪类选择器

选择符	简介
E：first-child	匹配父元素中的第一个子元素E
E：last-child	匹配父元素中最后一个子元素E
E：nth-child（n）	匹配父元素中的第n个子元素E
E：first-of-type	指定类型E的第一个
E：last-of-type	指定类型E的最后一个
E：nth-of-type（n）	指定类型E的第n个

注：
1）E：last-child（n）：n可以是数字，关键字和公式
n如果是数字，就是选择第几个
常见的关键词有even偶数 odd奇数
2）E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
3）E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
4）nth-child（n）选择父元素里面的第n个孩子，他不管里面 的孩子是否是同一种类型
nth-of-type（n）：选择指定类型的元素
4）伪类：通过冒号来定义，来定义元素的状态，通过伪类可以为元素的状态修改样式其他

1.3 伪元素选择器

选择器	简介
：：before	在元素内部前面插入内容
：：after	在元素内部后面插入内容

注：
示例1：
html

<div class="box1">
    我是博主
</div>

css

.box1::before{
    content:"大家好"
}
.box1::after{
    content:"cyl_❀"
}

1.4 其他选择器

2.css3的过度和变换

2.1 transition:过渡属性

CSS 的transition允许 CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠
标单击、获得焦点、被单击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属
性值。transition 属性具体可分为以下四个子属性

综合写法：
常用的写法是简写属性 transition，可以直接在这一个属性中设置其他四个属性，属性值
的顺序一般为 property、duration、timing-function、delay

transtion：all .3s ease 2s;

transition-timing-function 是指过渡效果的运行速度，以下是可以选择的值：
1）ease：（逐渐变慢）默认值。
2）linear：（匀速）。
3）ease-in：（加速）。
4）ease-out：（减速）。
5）ease-in-out：（加速然后减速）

2.2 2D转换

转换是css3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

• 移动：translate
• 旋转：rotate
• 缩放:scale

2.2.1 二维坐标系

2.2.2 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

transform：translate(x,y);
/*分开写,n为移动距离*/
transform:translateX(n);
transform:translateY(n);

注：
1）定义2D转换中的移动，沿着×和Y轴移动元素
2）translate最大的优点:不会影响到其他元素的位置
3）translate中的百分比单位是相对于自身元素的 translate(50%,50%);
4）对行内标签没有效果

2.2.3 旋转rotate

2D旋转指的是让元素在二维平面內顺时针或者逆时针旋转

transform：rotate(度数)

注：
1）rotate里面跟度数，单位是deg比如rotate(45deg)
2）角度为正时，顺时针，负时，为逆时针
3）默认旋转的中心点是元素的中心点，可以通过transform-origin设置元素的转换中心点

2.2.4 转换中心点transform-origin

可以修改元素转换的中心点

transform：x,y;

注：

1. 注意后面的参数x和y用空格隔开
2. x y默认转换的中心点是元素的中心点(50%50%)
3. 还可以给x y设置像素或者方位名词(top bottom left right center)
   例2：
   css

  body {
            position: relative;
        }
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 100px;
        }
        div:nth-child(1) {
            background-color: brown;
        }
        div:nth-child(2) {
            background-color: aqua;
              /* 以右下角为旋转中心点 */
            transform-origin: right bottom;
            transform: rotate(45deg);
        }

html

 <div></div>
 <div></div>

效果：

2.2.5 缩放 scale

transform:scale(x,y);

注：
可以设置转换中心点的缩放，默认以中心点缩放的，而且不影响其他盒子

2.2.6 2D转换的综合写法

transform：translate() rotate() scale();

注：1）其综合写法的顺序，会影响转换的效果（先旋转会改变坐标轴的方向）
2）当我们同时有位移和其他属性的时候，记得将位移放在最前面
例二修改：

 transform: translateX(100px) rotate(45deg);

先旋转后移动

2.3 3D转换

2.3.1 三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

• x轴:水平向右注意:x右边是正值，左边是负值
• y轴:垂直向下注意:y下面是正值，上面是负值·
• z轴:垂直屏幕注意:往外面是正值，往里面是负值

2.3.1 3D移动

transform:translateX(100px)
transform:translateY(100px)
transform:translateZ(100px)
transform:translate3d(x,y,z)

注:因为z轴是垂直屏幕，由里指向外面，所有默认是看不到元素在z轴的方向上移动的

2.3.2 透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的
1）如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内)
2）模拟人类的视觉位置，可认为安排一只眼睛去看
3）透视我们也称为视距:视距就是人的眼睛到屏幕的距离
4）距离视觉点越近的在电脑平面成像越大，越远成像越小
5）透视的单位是像素
注：
1）透视是写在被观察元素的父盒子上面的
2）加上透视，就能看到translateZ引起的变化了

2.3.3 3D旋转 rotate

transform:rotateX(100deg)
transform:rotateY(100deg)
transform:rotateZ(100deg)
/*沿着自定义轴旋转
transform:rotate3d(x,y,z，deg)

注:对于元素旋转的方向的判断，我们需要使用左手准则

2.3.4 3D呈现 transform-style

1）控制子元素是否开启三维立体环境。。
2）transform-style: flat子元素不开启3d立体空间默认的
3）transform-style: preserve-3d;子元素开启立体空间
4）代码写给父级，但是影响的是子盒子
加透视但是没有开启三维立体环境

加: preserve-3d

3.动画

3.1 动画的基本使用

制作动画分为两步：
1.先定义动画
2.再使用动画
定义

 @keyframes 动画名称 {
            0% {
                width: 100px;
            }

            100% {
                width: 200px;
            }
        }

注:
1)0% 是动画的开始，100% 是动画的完成。这样的规则是动画序列。
2)
用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%
使用

div {
            width: 100px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
            /* 调用动画 */
            animation-name: 动画名称;
            /* 持续时间 */
            animation-duration: 持续时间;
        }

3.2 动画常用属性

animation-time-function属性值，如下

3.3 动画属性简写

 animation: name duration timing-function delay iteration-count direction fill-mode;

注： 1） 简写属性里面不包含 animation-play-state
2）暂停动画：animation-play-state: puased; 经常和鼠 标经过等其他配合使用

4 案例

4.1奔跑的马里奥

css

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

            100% {
                background-position: -208px;
            }
        }

        @keyframes move {
            0% {}

            100% {
                margin-left: 1000px;
            }
        }

        .box {
            width: 68px;
            height: 150px;
            margin: 100px 100px;
           
            background: url(../img/mario_bros.png) no-repeat;
            background-size: 200px 150px;
             /* 当有多个动画时，用逗号隔开 */
            animation: run 0.5s steps(3) infinite, move 5s linear forwards;

        }

html

  <div class="box">
    </div>

原图

4.2 旋转木马

要求：自动旋转，鼠标放上停止旋转
css

  @keyframes move {
            0% {
                transform: rotateY(0deg);
            }

            100% {
                transform: rotateY(360deg);
            }
        }
        body {
            perspective: 1000px;
        }
        /* 旋转section盒子*/
        section {
            position: relative;
            width: 200px;
            height: 150px;
            /* background-color: aqua; */
            margin: auto;
            margin-top: 200px;
            transform-style: preserve-3d;
            animation: move 10s linear infinite;
        }
        section:hover {
            animation-play-state: paused;
        }

        div {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(../img/qiji1.jpg) no-repeat;
        }

        div:nth-of-type(1) {
            transform: translateZ(250px);
        }

        div:nth-of-type(2) {

            transform: rotateY(60deg) translateZ(250px);
        }

        div:nth-of-type(3) {

            transform: rotateY(120deg) translateZ(250px);

        }

        div:nth-of-type(4) {

            transform: rotateY(180deg) translateZ(250px);
        }

        div:nth-of-type(5) {

            transform: rotateY(240deg) translateZ(250px);
        }

        div:nth-of-type(6) {

            transform: rotateY(300deg) translateZ(250px);
        }

html

 <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

参考资料：黑马程序员pink老师前端入门教程