重生之我是程序员

                                      重生之我是程序员

                                          第三章

不知不觉来到了第三周，这几天又从老师哪里学了很多知识。感觉自己又变强了一点，掌握了一些新技能。
1. 伪元素选择器 ，页面文字的传新体验.首先写一个div,在div里面输入文本，然后咱们再给div一个样式，同时把背景设成自己喜欢的颜色并写出如下代码：
body{ background-color: crimson; } div::selection{ color: green; }；
然后运行就能出现如下效果：

2. 伪元素选择：之前在CSS2只学过一个伪类选择器，现在学到新的伪类选择器.它们分别是：dansh:not 除了自身都会被执行
   :first-child 只有第一个会被执行；
   :last-child 只有最后一个会被执行；
   :only-child 被选中的唯一一个会被执行；
   :nth-child 填的几第几个就会被执行；
   :nth-last-child 倒着数填的几 那个数就会被执行；
   但是，以上这些元素会被其他元素影响，它是强调某个父元素的某一个子元素，目前位置使用不多。
   有着同样效果的还有一组，这一组就比较好用了，因为他们时强调特定类型的某一个子元素，这样比较准确，它们分别是：
   :first-of-type 只有第一个会被执行；
   :last-of-type 只有最后一个会被执行；
   :only-of-type 被选中的唯一一个会被执行；
   :nth-of-type 填的几第几个就会被执行；
   :nth-last-of-type 倒着数填的几 那个数就会被执行；
   比如我在body里面设置3个div。然后在head里面输入<style></style>,给它一个样式，`并给它设置宽高如下：

div:nth-of-type(2){
            background-color: blue;
            width: 300px;
            height: 300px;
        }
        div:nth-of-type(1){
            background-color: crimson;
            width: 300px;
            height: 300px;}
            
        div:nth-of-type(3){
            background-color: yellow;
            width: 300px;
            height: 300px;
        }`
        

最后运行出来的结果如下：

3. 变形操作的运用：实际上，作为刚接触的小白，学习了平面上的移动即使用margin来操作只能解决2D方面的问题，最近接触到了3D方面的移动知识，仿佛打开新世界。
基础上面的变形操作就是使用 transform 控制元素的变形操作，移动、旋转、3D转换、倾斜、缩放。它的取值有：translateY即是沿着Y轴做平面运动，：translateX即是沿着X轴做平面运动，这两个有点像margin，但是它还有tranlsateZ即是朝着Z轴移动，和Z轴搭上关系就有立体的东西了，而且作为相对基础的东西，它还可以和它的取值中的rotate配合使用，rotate就是普通的2D旋转，就是像咱们打牌把牌捋顺要有一个平面角度一样，而rotateX就是沿着X轴的旋转，这个时候就具有3D的效果了，还有rotateY即沿着Y轴旋转，rotateZ沿着Z轴旋转。
下面举个例子：先设置一下背景颜色，在设置一下观察3D效果的最佳视距perspective: 800px;，ul设置宽高同时设置边框类型，再给他设置一个transform-style: preserve-3d;，这样可以让我清楚的观察到3D效果。最后咱们选中我们ul下面的每个li，并且给其设置与父级同宽高及其不一样的背景颜色。然后使用子相父绝布局，这样li就会全部堆到ul上面，在这个时候我我们只能看见一块内容。然后我们给ul设置一个hover伪类，并为其设置绕Z轴旋转35度，再在2D平面旋转45度，然后再用transition: all 1s;让其1s完成这个过程。我们点到ul时就是如下图片：

然后咱们再给ul子级li每个都设置一个伪类，由于是点到ul时触发li的伪类，因此在写伪类时 用如下语句 ul:hover li:nth-of-type(1)，写好之后因为位置好，直接让堆在ul上面的li向Z轴往上走即可，于是写上transform:translateZ(60px) ;，因为他堆在ul上最上面一张，所以要移位最远，再给它设置一下动画的时间和延迟时间transition: all 1s 1s;，后面的移动距离依次减20px，延迟时间因为要有层次感不能一下子全上去也依次加0.2s，最后做出来的效果就是这样的：

```java
  body{
            background-color: black;
            perspective: 800px;
            
        }
        ul{
            border: orangered 1px solid;
            height: 300px;
            width: 200px;
            position: relative;
            padding: 0px;
            margin: 200px auto;
            transform-style: preserve-3d;
            
        }
        li:nth-of-type(1){
           position: absolute;
           height: 300px;
            width: 200px;
            background-color: palegoldenrod;
           
        }
        li:nth-of-type(2){
            position: absolute;
            height: 300px;
            width: 200px;
            background-color: palegoldenrod;
        }
        li:nth-of-type(3){
            position: absolute;
            height: 300px;
            width: 200px;
            background-color: palegoldenrod;
        }
        ul:hover{
           transform: rotateX(35deg) rotate(45deg);
           transition: all 1s;
        }
        ul:hover li:nth-of-type(1){
            transform:translateZ(60px) ;
            transition: all 1s 1s;
        }
        ul:hover li:nth-of-type(2){
            transform:translateZ(40px) ;
            transition: all 1s 1.2s;
        }
        ul:hover li:nth-of-type(3){
            transform:translateZ(20px) ;
            transition: all 1s 1.4s;
        }