WEB开发基础篇 ---- 进阶篇CSS3学习-CFANZ编程社区

此篇文章为进阶知识点HTML5的学习，为本人学习时的笔记记录，同时也适合初学者学习。喜欢的友友可以关注一下，后续会补充JavaScript，TypeScript，vue2.0，vue3.0以及uni框架等等一系列的前端学习文章。（强者不喜请绕道，本人内心脆弱，勿喷）

现在已经学习了HTML和CSS的我们做一个静态网页已经是没有问题的了，但是随着CSS3的出现现在可以将我们的静态页面更进一步的美化。本篇内容我们就来了解一下CSS3相较于CSS新增了哪些内容，并且将这些知识点一一讲解并学会如何使用。

1. CSS3新增的选择器

1. 属性选择器

新的属性选择器使我们选择特定的元素会更加方便，并且使用起来很简单，给大家列一个表格👇

选择符	简介
元素名[属性名]	选择具有某个属性的某个元素
元素名[属性名="val"]	选择具有某个属性名且属性值等于val的某个元素
元素名[属性名^="val"]	匹配以值为val开头的属性名的某个元素
元素名[属性名$="val"]	匹配以值为val结尾的属性名的某个元素
元素名[属性名*="val"]	匹配属性名中含有值为val的属性名的某个元素

如果看完了不太清楚，我们可以跑一下这个案例来了解一下上述表格的各种属性选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 必须是input但是同时须有value这个属性 选择这个元素 */
        input[value]{
            color: skyblue;
        }
        /* 选择属性且属性值等于某个值的元素 重点*/
        input[type="text"]{
            color: powderblue;
        }
        /* 选择section属性，然后具有class属性并且以特定属性值开头的某些元素 */
        section[class^=icon]{
            color: red;
        }
        /* 选择section属性，然后具有class属性并且以特定属性值结尾的某些元素 */
        section[class$=data]{
            color: rgb(114, 250, 250);
        }
         /* 选择section属性，然后具有class属性并且包含特定属性值的某些元素 */
        section[class*=na]{
            color: seagreen;
        }
    </style>
</head>
<body>
    <input type="text" value="请输入用户名">
    <input type="password">
    <section class="icon1">小图标1</section>
    <section class="icon2">小图标2</section>
    <section class="icon3">小图标3</section>
    <section class="icon4">小图标4</section>
    <section class="icon5">小图标5</section>
    <section class="icon1-data">小图标</section>
    <section class="icon2-data">小图标</section>
    <section class="icon3-ico">小图标</section>
    <section class="iconat1">小图标</section>
    <section class="iconat2">小图标</section>
    <section class="icon3-ico">小图标</section>
</body>
</html>

2. 结构伪类选择器

话不多说直接看表格👇

选择符	简介
元素名:first-child	选择父元素中的第一个子元素
元素名:last-child	选择父元素中的最后一个子元素
元素名:nth-child(n)	选择父元素中的第n个子元素
元素名:first-of-type	指定类型元素名的第一个
元素名:last-of-type	指定类型元素名的最后一个
元素名:nth-of-type(n)	指定类型元素名的第n个

需要注意的是其中nth-child(n)中的n可以为数字，也可以为公式

n的关键字：even偶数，odd奇数。n的公式可以用这样的方式书写：2n, 2n+1, 5n, n+5...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. 选择ul中的第一个li */
        ul li:first-child {
            background-color: skyblue;
        }
        /* 2. 选择ul中最后一个li */
        ul li:last-child {
            background-color: skyblue;
        }
        /* 3. 选择其中某个li */
        ul li:nth-child(4){
            background: skyblue;
        }
        ul li:nth-child(even){
            background-color: #ccc;
        }
        ul li:nth-child(n){
            background-color: pink;
        }
        ul li:nth-child(2n+1){
            background-color: #ccc;
        }
        /*会给所有孩子进行排序，再往前面匹配类名符不符合*/
        section div:nth-child(2){
            background-color: red;
        }
        /*先进行前面类的判断，再开始排序，类似语句还有last-of-type，first-of-type*/
        section div:nth-of-type(1){
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <li>第6个孩子</li>
        <li>第7个孩子</li>
        <li>第8个孩子</li>
    </ul>
    <section>
        <p>123456</p>
        <div>qwert</div>
        <div>!@#$%$#^%</div>
    </section>
</body>
</html>

3. 伪元素选择器（重点）

什么是伪元素呢？指的是这个新创建的元素在文档树中是查找不到的，因此将该元素称为伪元素。而伪元素选择器可以利用CSS创建新标签元素而不需要HTML标签，从而简化HTML结构。

选择符	简介
::before	在元素前面插入内容
::after	在元素后面插入内容

注意：

before和after创建一个元素，但是是属于行内元素

before和after都必须要有content类

before在父元素内容的前面创建元素，after在之后创建元素

伪元素选择器和标签选择器一样，权重均为1

语法：element::before{ }，像之前介绍过通过after伪元素进行清除浮动，今天再来复习一次

.clearfix:after{
    content: "" ;            #伪元素必填
    display:block ;          #转换为块级元素
    height:0 ;               #不显示，高度为0
    clear:both ;             #清除浮动核心代码
    visibility:hideen ;      #不显示
}

2. CSS3的盒模型

以前设置盒子的宽高后继续使用margin，padding等属性的时候会撑开盒子，而现在CSS3可以通过box-sizing来指定盒模型，其中有两个值，为content-box，border-box

box-sizing：content-box 当为这个值时盒子大小为width+padding+border（以前默认的）
box-sizing：border-box 当为这个值时盒子大小直接为width

了解即可，可以通过实战来体验两种盒模型的区别。

3. CSS3过渡（重点）

过渡（transition）是CSS3最具颠覆性的特征之一，可以在不使用flash或js的情况下为元素添加效果，经常和hover搭配使用。

transition：要过渡的属性，花费时间，曲线运动，何时开始；

属性：想要变化的css属性，宽高背景颜色都可，如果全部变化则写all
花费时间：单位必须是秒
运动曲线：默认ease，可省略（linear匀速，ease渐慢，ease-in渐快，ease-out减速，ease-in-out先快后慢）
何时开始：单位必须是秒，可以设置延迟触发时间，默认为0秒，可省略

记住过渡口诀：谁做过渡给谁用，如果是多个属性变化，则用逗号隔开。

（本来电脑里记得还有和挺好看的案例的但是找不到了orz，在此就不举例了）

4. CSS3-2D转换

转换（transform）是CSS3具有颠覆性的特征之一，可实现元素的位移，旋转，缩放等效果

可简单理解为变形

1. 移动 translate：改变元素在页面的位置

语法： transform: translate(x,y) ;

transform: translateX(n) ;

transform: translateY(n) ;

重点：定义2D转化中的移动不会影响其他元素的位置，类似于定位

对行内标签没有效果

translate中的百分比单位是对于元素本身而言的

2. 旋转 rotate：

语法： transform: rotate(度数）

重点： rotate跟度数，单位为deg

角度为正时为顺时针，反之逆时针

默认旋转中心是元素中心点

2D转换中心点：transform-origin：x y;

3. 2D缩放 scale：

语法： transform：scale（x, y);

transform:scale(1,1)等于没放大，（2,2）表示宽高都为2倍，只写一个参数默认两个参数一致

可以设置缩小放大中心点，不会影响其他盒子的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: bisque;
            transform:translate(10px,10px);
        }
        img{
            width: 150px;
            
        }
        img:hover{
            transform:rotate(3600deg);
            transition: all,1s;
        }
        .div1{
            background-color: blue;
            width: 200px;
            height: 200px;
            margin:100px auto;
            transform-origin: left bottom;
            transition: all,0.5s;
        }
        .div1:hover{
            transform:translate(100px,100px)rotate(720deg)scale(2,2)
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

5. CSS3动画

动画（animation）是CSS3具有颠覆性的特征之一，可通过设置多个节点来精准控制一个或一组动画，常用来实现复杂的动画效果。相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用：

先定义动画

0%是动画的开始，100%是动画的结束，这样的规则就是动画序列
@keyframes中规定某项CSS样式，就能创建由当前样式主键改变为新样式的动画效果

动画是使元素从一个样式逐渐到另一个样式的效果，可以改变任意多的样式和次数

再调用动画

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

常用的属性有以下这些：

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性
animation-name	规定@keyframes的动画名称
animation-duration	规定动画完成需要的时间
animation-timing-function	规定动画的速度曲线
animation-delay	规定动画何时开始
animation-iteration-count	规定播放的次数
animation-direction	规定动画是否在下一周期逆向播放
animation-play-state	规定动画是否暂停或运行
animation-fill-mode	规定结束后的状态

举个综合栗子：

（css部分）

.wall{
    background: url("../bg.jpg");
    background-size: cover;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    background-color: #000;
    text-align: center;
}
body::before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.scene {
    display: inline-block;
    vertical-align: middle;
    perspective: 5px;
    perspective-origin: 50% 50%;
    position: relative;
}
.wrap{
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: -500px;
    top: -500px;
    transform-style: preserve-3d;
    animation: move 15s infinite linear;
}
.wrap:nth-child(2){
    animation: move 12s infinite linear;
}
.wall{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: fade 3s infinite linear;
}
.wall-right{
    transform: rotateY(90deg) translateZ(500px);
}
.wall-left{
    transform: rotateY(-90deg) translateZ(500px);
}
.wall-top{
    transform: rotateX(90deg) translateZ(500px);
}
.wall-bottom{
    transform: rotateX(-90deg) translateZ(500px);
}
.wall-back{
    transform: rotateX(180deg) translateZ(500px);
}
@keyframes move{
    0% {
        transform: translateZ(-500px) rotate(0deg);
    }
    100% {
        transform: translateZ(500) rotate(0deg);
    }
}
@keyframes fade{
    0%{
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

（html部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超时空动画</title>
    <link rel="stylesheet" href="css/space-time.css">
    <meta http-equiv="refresh" content="3;url=特效界面.html">
</head>
<body>
    <div class="scene">
        <div class="wrap">
            <div class="wall wall-right"></div>
            <div class="wall wall-left"></div>
            <div class="wall wall-top"></div>
            <div class="wall wall-bottom"></div>
            <div class="wall wall-back"></div>
        </div>
        <div class="wrap">
            <div class="wall wall-right"></div>
            <div class="wall wall-left"></div>
            <div class="wall wall-top"></div>
            <div class="wall wall-bottom"></div>
            <div class="wall wall-back"></div>
        </div>
    </div>
</body>
</html>

背景图片👇

跑出来的效果是这样的（不会录制gif，动态的更好看）

6. CSS3-3D转换

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

3D移动在2D移动的基础上多加了一个Z轴可移动方向。

语法为：transform: translate3d(x,y,z)：分别为三个方向的移动距离。

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

指可以让元素在三维平面内沿x,y,z或自定义轴旋转。

补充：transform: rotate3d(x,y,z,deg)（了解即可）

3. 透视：perspective

可以使网页产生3D效果，单位是像素，是写在父盒子上的，translate3dZ是写在子元素上的

4. 3D呈现：transfrom-style（重点）

控制子元素是否开启三维立体环境

transform-style：flat子元素不开启3d立体空间默认

transform-style：preserve-3d，子元素开启立体空间

代码写在父级，但受影响的是子元素

来个案例感受一下👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            transform-style: preserve-3d;
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all,1s;
        }
        .front,.back{
            position: absolute;
            top:0;
            left: 0;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            font-size: 30px;
            line-height: 300px;
        }
        .front{
            background-color: cyan;
            z-index: 1;
        }
        .back{
            background-color: red;
            transform: rotateY(180deg);
        }
        .box:hover{
            transform: rotateY(180deg);
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">蓝色</div>
        <div class="back">红色</div>
    </div>
</body>
</html>

至此HTML+CSS的全部知识就结束了，虽然现在已经掌握了能够制作静态页面的知识了，但一个真正有用的网页不仅仅只是静态的，因此为了使页面具有交互性，我们接下来就要学习关于JavaScript的知识点了。这部分的内容会比HTML+CSS的全部知识点还要多很多，笔者会慢慢更新，希望读者们在看过文章后都能学会，感兴趣的友友们请留个赞😀 溜溜