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