文章目录
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;
注：
- 注意后面的参数x和y用空格隔开
- x y默认转换的中心点是元素的中心点(50%50%)
- 还可以给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老师前端入门教程
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
