目录
nth-child(n)选择某个父元素的一个或者多个特定的子元素
E:first-of-type和E:last-of-type的区别
1.8.4 2D转换中心点 transform-origin
一、CSS3新增选择器
1.1 属性选择器
类选择器和属性选择器 伪类选择器 权重都是 10
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
div.icon1 {
color: skyblue;
}
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
1.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素。
<style>
/* 1.选择ul里面的第一个孩子 */
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: skyblue;
}
ul li:nth-child(5) {
background-color: red;
}
</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>
</body>
nth-child(n)选择某个父元素的一个或者多个特定的子元素
- n可以是数字,关键字和公式
- n如果是数字,就是选择第n个子元素,里面数字从1开始......
- n可以是关键字:even偶数,odd奇数
- n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
<style>
/* 1.把所有的偶数 even的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
/* ol li:nth-child(n) {
background-color: pink;
} */
/* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
/* ol li:nth-child(2n) {
background-color: pink;
}
ol li:nth-child(2n+1) {
background-color: skyblue;
} */
/* ol li:nth-child(n+3) {
background-color: pink;
} */
ol li:nth-child(-n+3) {
background-color: pink;
}
</style>
E:first-of-type和E:last-of-type的区别
- nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E 找第n个孩子
小结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E找第n个孩子
- 关于nth-child(n), 我们要知道n是从0开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用 nth-child 更多
- 类选择器,属性选择器,伪类选择器,权重为10
1.3 伪元素选择器
伪元素选择器可以帮我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符 | 简介 |
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
-
before 和 after 创建一个元素,但是是属于行内元素
-
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
-
语法:element::before{}
-
before和after必须有content属性
-
before在父元素内容的前面创建元素,after在父元素内容的后面创建元素
-
伪元素选择器和标签选择器一样,权重为1
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* 注意,伪元素与div之间不用加空格,否则显示不出来 */
div::before {
/* 这个content属性是必须要写到 */
content: '我';
}
div::after {
content: 'pink';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
1.4 伪元素选择器应用场景
1.配合字体图标(不用新建div创建盒子)
2.仿土豆效果(使用伪元素作为遮罩层)
3.伪元素选择器清除浮动
1.5 CSS盒子模型
CSS3中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为content-box,border-box
1.5.1 content-box
这种情况下是默认CSS 的盒子模型,盒子大小为 width + padding + border,即宽度+内边距+边框
1.5.2 border-box
如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了
(前提是padding和border不会超过width宽度)
在以后的编写代码过程中,我们都可以用这种CSS3盒子模型,不用担心盒子被撑大的问题。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 这样的话padding和border就不会撑大盒子了 */
}
1.6 CSS3其他特性(了解)
1.6.1 图片变模糊
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如 :filter:blur(5px); blur模糊处理 数值越大越模糊
<style>
img {
filter: blur(15px);
}
img:hover {
filter:blur(0);
}
</style>
</head>
<body>
<img src="../images/pink.jpg" alt="">
</body>
1.6.2 CSS宽度计算 cacl函数
cacl()此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100% -80px);
括号里面可以使用 + - * / 来进行计算
1.7 CSS3过渡(重点)
-
过渡(transition)
是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果 -
过渡动画:是从一个状态渐渐的过渡到另外一个状态
-
过渡经常和:hover一起搭配使用
transition:要过渡的属性 花费时间 运动曲线 何时开始;
- 属性:想要变化的 CSS 属性,宽度高度,背景颜色,内外边距都可以,如果想要所有的属性都变化过渡,写一个all就可以。
- 花费时间:单位是秒(必须写单位) 比如0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须写单位),可以设置延迟触发事件,默认是0s(可以省略)
使用口诀:谁做过渡给谁加
1.8 CSS3 2D转换
转换(transform)
是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果。
转换(transform)可以理解为简单变形
- 移动:translate
- 旋转:rotate
- 缩放:scale
1.8.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术。
1.8.2 2D转换之移动 translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
语法:
transform:translate(x,y); 或者分开写
transform:translateX(n);
transform:translateY(n);
<style>
/* 移动盒子的位置:定位 盒子的外边距 2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置,y就是y轴上移动位置,中间用逗号分隔 */
/* transform: translate(x,y); */
transform: translate(100px, 100px);
/* 1.只移动x坐标 x写移动位置,y写0 不能省略 */
/* transform: translate(100px,0); */
/* 或者写为translateX */
transform: translateX(100px);
}
</style>
重点:
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate 最大的优点:不会影响到其他元素的位置
- translate 中的百分比单位是相对于自身元素的
translate:(50%,50%);
- 对行内标签没有效果
让盒子实现水平和垂直居中
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 1.translate中的参数可以用% */
/* 2.如果里面的参数是% 移动的距离是盒子滋生的宽度盒子高度来对比的 */
/* 这里的50%就是50px 因为盒子的宽度是100px */
transform: translateX(50%);
}
p {
position: absolute;
top:50%;
left: 50%;
/* margin-top: -100px;
margin-left: -100px; */
width: 200px;
height: 200px;
background-color: purple;
/* translate(-50%,-50%);盒子往上走自己高度的一半,盒子往左走自己宽度的一半 */
transform: translate(-50%,-50%);
}
span {
/* translate对于行内元素是无效的 */
transform: translate(300px,300px);
}
</style>
1.8.3 2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针选择或者逆时针选择。
语法:
transform:rotate(度数)
重点:
- rotate 里面跟度数,单位是 deg 比如 rotate(45deg)
- 角度为正时,顺时针,负时,为逆时针
- 默认旋转的中心点是元素的中心点
1.8.4 2D转换中心点 transform-origin
我们可以设置元素转换的中心点
transform-origin:x y;
重点:
- 注意后面的参数x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y 设置 像素或者方位名词(top bottom left right center)
旋转案例:
<!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>
<style>
div {
overflow: hidden;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
div::before {
content:'黑马';
display: block;
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.5s;
}
/* 鼠标经过div里面的before复原 */
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.8.5 2D转换之缩放scale
缩放,顾名思义,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
transform:scale(x,y);
div:hover {
/* 1.里面写的数字不跟单位 就是倍数的意思 1就是1倍 2就是2倍 */
/* transform:scale(x,y); */
/* 2.修改了宽度为原来的2倍,高度不变 */
/* transform:scale(2,1); */
/* 3.等比例缩放 同时修改宽度和高度,我们有简单的写法 以下是 宽度修改了2倍,高度默认和第一个参数一样*/
/* transform: scale(2); */
/* 4.我们可以进行缩小,小于1就是缩小 */
transform: scale(0.5);
/* 5.scale 的优势之处:不会影响其他盒子,而且能够设置缩放中心点 */
}
注意:
- 其中的x和y用逗号分割
- transform:scale(1,1): 宽和高都放大一倍,相当于没有放大
- transform:scale(2,2):宽和高都放大了2倍
- transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
- transform:scale(0.5,0.5):缩小
- sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
1.8.6 2D转换综合写法
注意:
- 同时使用多个转换,其格式为: transform:translate() rotate() scale() 移动-旋转-缩放
- 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性时候,记得要将位移放到最前面
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性,我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
1.8.7 2D转换总结
- 转换transform 我们简单理解就是变形 有2D 和 3D 之分
- 我们暂且学了三个 分别是 位移 旋转 和 缩放
- 2D 移动 translate(x, y) 最大的优势是不影响其他盒子, 里面参数用%,是相对于自身宽度和高度来计算的
- 可以分开写比如 translateX(x) 和 translateY(y)
- 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg
- 2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
- 设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
- 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
1.9 CSS3 动画
动画 animation是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
1.9.1 动画的基本使用
制作动画分为两步:
- 先定义动画
- 再使用(调用)动画
1.用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
- 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。
- 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
2 .使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
3.案例(实现效果:打开页面盒子从左往右平移)
<style>
/* 我们想页面一打开,一个盒子就从左边走到右边 */
/* 1.定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
4.from to 的用法
<style>
/* from和to等价于0%和100% */
@keyframes move {
from {
transform:translate(0,0);
}
to {
transform:translate(1000px,0);
}
}
/* 动画序列 */
div {
animation: move;
animation-duration: 2s;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
</body>
5.多段动画
代码:
<style>
/* from和to等价于0%和100% */
/* @keyframes move {
from {
transform:translate(0,0);
}
to {
transform:translate(1000px,0);
}
} */
/* 动画序列 */
/* 1.可以做多个状态的变化 */
/* 2.里面的百分比是整数 */
/* 3.里面的百分比就是总的时间的划分 */
@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(500px,0);
}
50% {
transform: translate(500px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
animation: move;
animation-duration: 10s;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
</body>
1.9.2 动画常用属性
/* 动画名称 */
animation-name: move;
/* 持续时间 */
/* animation-duration: 2s; */
/* 运动曲线 */
/* animation-timing-function: ease; */
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
/* animation-fill-mode: forwards; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* animation: move 2s linear 0s 1 alternate forwards; */
/* 前面2个属性 name duration 一定要写 */
/* animation: move 2s linear alternate forwards; */
}
div:hover {
/* 鼠标经过div 让这个div 停止动画,鼠标离开就继续动画 */
animation-play-state: paused;
}
1.9.3 动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
- 简写属性里面不包含 animation-play-state
- 暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来 ,而不是直接跳回来:animation-direction: alternate
- 盒子动画结束后,停在结束位置: animation-fill-mode : forward
1.9.4 速度曲线细节
1.10 CSS3 3D转换
3D转换我们主要学习工作中最常用的 3D位移 和 3D旋转。
1.10.1 三维坐标系
1.10.2 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向
- transform:translateX(100px):仅仅是在x轴上移动
- transform:translateY(100px):仅仅是在Y轴上移动
- transform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
- transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离
因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* 1.translateZ沿着Z轴移动 */
/* 2.translateZ后面的单位一般跟px */
/* 3.translateZ(100px) 向外移动100px */
/* 4.3D移动简写方法 */
transform: translate3d(100px,100px,100px);
/* 5.xyz是不能省略的,如果没有就写0 */
}
</style>
</head>
<body>
<div></div>
</body>
1.10.3 透视perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
透视可以理解为盒子位置不变,透视值越小,距离越小,盒子变大
透视写在被观察元素的父盒子上面的
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。
z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大
1.10.4 translateZ
在父元素上加上透视,就能看出translateZ()的变化了
1.10.5 3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。
- transform: rotateX(45deg) :沿着X轴正方向旋转45度
- transform: rotateY(45deg) :沿着Y轴正方向旋转45度
- transform: rotateZ(45deg) :沿着Z轴正方向旋转45度
- transform: rotate3d(x,y,z,deg) :沿着自定义轴旋转 deg为角度(了解即可)
对于元素方向的判断我们可以使用左手准则。
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可)
xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,是最后一个标示旋转的角度。
- transform: rotate3d(1,0,0,45deg) 沿着X轴旋转45deg
- transform: rotate3d(1,1,0,45deg) 沿着对角线旋转45deg
1.10.6 3D呈现transfrom-style
- 控制子元素是否开启三维立体环境
transform-style: flat
子元素不开启3d立体空间 默认的transform-style: preserve-3d
子元素开启立体空间- 代码写给父级,但是影响的是子盒子
- 这个属性很重要,后面必用
两面翻转盒子的案例:
CSS样式:
- box指定大小,切记要加3D呈现
- back盒子要沿着Y轴翻转180度
- 最后鼠标经过box沿着Y轴旋转180deg