好玩的CSS3（超全笔记奉上）
目录标题
- CSS3属性选择器
- CSS3结构伪类选择器
- nth-child(n)
- nth-of-type()
- CSS3伪元素选择器
- CSS3 2D转换
- 1.2D转换之移动 translate
- 2.2D转换之旋转 rotate
- 3.2D转换之缩放 scale
- 4.2D转换综合写法
- CSS3 动画
- 1.动画的基本使用
- 2.动画常用属性
- 3.动画简写属性
- 4.速度曲线细节
- CSS3 3D转换
- 3D旋转 rotate3d
- 3D呈现transform-style
CSS3属性选择器
对以上选择符做代码验证：
<style>
/* 小手样式 */
/* 权重是 1 */
button {
cursor: pointer;
}
/* 属性选择器使用方法 */
/* 箭头样式 */
/* 选择的是：既是button 又是 disabled 这个属性的元素 */
/* 属性选择器的权重是10 1+10=11*/
/* 1.直接写属性 */
/* 显示箭头样式 */
button[disabled] {
cursor: default;
}
/* 2.属性等于值 */
input[type="search"] {
color: pink;
}
/* 3.以某个值开头的属性 */
/* 选中以icon开头的 */
div[class^="icon"] {
color: red;
}
/* 4.以某个值结尾的 */
/* 选中以icon结尾的 */
div[class$="icon"] {
color: green;
}
/* 5.可以在任意位置的 */
/* 只要包含的都选中 这些字母也是要连续的*/
div[class*="icon"] {
color: purple;
}
</style>
<body>
<!-- disabled 是禁用我们的按钮 -->
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>
<div class="iicon3">图标4</div>
<div class="abcicon">图标5</div>
</body>
显示样式：
CSS3结构伪类选择器
示例一：
<style>
/* 选择的是第一个 li */
ul li:first-child {
background-color: pink;
}
/* 选择的是最后一个li */
ul li:last-child {
background-color: deeppink;
}
/* nth-child(n) 我们要第几个 n就是几 */
ul li:nth-child(8) {
background-color: green;
}
</style>
<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>
<li>9</li>
<li>10</li>
</ul>
</body>
显示样式：
nth-child(n)
- n可以是数字、关键字和公式
- n如果是数字，就是选择第几个
- 常见的关键词有 even 偶数 odd 奇数
- 常见公式如下（如果n是公式，则从0开始计算）
- 但是第0个元素或者超出了元素的个数会被忽略
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15… |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第5个） |
示例二：
<style>
/* n 可以是关键词 even 是偶数 odd 是奇数 */
ul li:nth-child(even) {
background-color: pink;
}
ul li:nth-child(odd) {
background-color: red;
}
/* n 可以是公式 */
/* 2n 偶数 相当于 even */
ul li:nth-child(2n) {
background-color: green;
}
/* 选择 5 的倍数 */
ul li:nth-child(5n) {
background-color: purple;
}
/* 选择 后五个 */
ul li:nth-child(n+5) {
background-color: hotpink;
}
/* 选择 前五个 */
ul li:nth-child(-n+5) {
background-color: skyblue;
}
</style>
<body>
<!-- ul 里面我们只允许放li 所以对于这个例子来说 nth-child 和 nth-of-type 就一样了 -->
<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>
<li>9</li>
<li>10</li>
</ul>
</body>
nth-of-type()
对于一个父级元素，如果里面存放了不同样式的孩子，这个时候就用到了
nth-of-type()属性
以下代码很好地说明了这一点：（总结很详细，建议认真看一看，虽然有点长…）
<style>
/* 选择的是div的第二个 孩子 也就是第一个span */
/* div :nth-child(2) {
background-color: purple;
} */
/* 这个是选不到的 span 在里面是div 的第二个孩子 而这里又选的是div 的第一个孩子 而第一个孩子是p */
/* 选择的是p 而不是span */
/* div span:nth-child(1) {
background-color: pink;
} */
/* 这样才可以选到第二个 也就是 第一个span */
/* div span:nth-child(2) {
background-color: green;
} */
/* 总结： :nth-child(n) 选择 父元素里面的 第n个孩子 它不管里面的孩子是否是同一个类型 */
/* of-type 选择指定类型的元素 这里指定的是span类型的 选出了第一个span */
div span:first-of-type {
background-color: purple;
}
/* 选择的是最后一个span */
div span:last-of-type {
background-color: red;
}
/* 选择的是第二个span */
div span:nth-of-type(2) {
background-color: green;
}
</style>
<body>
<div>
<p>我是一个P</p>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
</div>
</body>
CSS3伪元素选择器
| 选择器 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before和after必须有content属性
- before在内容的前面，after在内容的后面
- befor 和 after 都是一个盒子 可以给宽高 但需要转换为行内块（或块）元素 因为 他们两个本身是行内元素
- 伪元素和标签选择器一样，权重为1
代码示例：
<style>
div {
width: 300px;
height: 300px;
border: 1px solid black;
}
/* befor 和 after 都是一个盒子 可以给宽高 但需要转换为行内块（或块）元素 因为 他们两个本身是行内元素 */
/* 注意div 和 ::befor 之间不能有间隔 */
div::before {
content: "我";
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
div::after {
content: "小猪佩奇";
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div>
是
</div>
</body>
显示样式：
CSS3 2D转换
转化（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
1.2D转换之移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
（1）语法：
transform:translate(x,y);
分开写：
transform:translateX(n);
transform:translateY(n);
（2）重点：
translate最大的优点：不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的- 对行内标签没有效果
2D转换之位移 代码示例：
<style>
/* 移动盒子的位置： 定位 盒子的外边距（margin） 2D转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x 就是x轴上移动位置 y 就是 y轴上移动位置 中间用逗号分隔 */
/* transform: translate(x,y); */
/* transform: translate(100px, 100px); */
/* 只移动x轴位置 */
/* transform: translateX(100px);
只移动y轴位置 */
/* transform: translateY(100px); */
}
div:first-child {
/* 它的移动不会影响其他盒子的位置 */
transform: translate(30px, 30px);
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
<body>
<div></div>
<div></div>
</body>
运行效果：
让盒子实现水平垂直居中 代码示例：
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 如果translate里面的参数是百分号 移动的距离是 盒子自身的宽度或者高度来比较的 */
注释掉的代码是外面的大盒子向右移动了250px
/* transform: translateX(50%); */
}
p {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
这个注释掉的也是可以实现里面小盒子垂直居中的
/* margin-top: -100px;
margin-left: -100px; */
这个更简洁
transform: translate(-50%, -50%);
background-color: purple;
}
运行效果：
2.2D转换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转
（1）语法：
transform:rotate(度数);
（2）重点：
- rotate里面跟度数，单位为deg 比如 rotate(45deg)
- 角度为正时，顺时针，负时，逆时针
- 默认旋转的中心点是元素的中心点
图片旋转 代码示例：
<style>
img {
width: 150px;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过度写到本身上，谁做动画给谁加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
<body>
<div>
<img src="pic.jpg" alt="">
</div>
</body>
运行效果：
三角旋转 代码示例：
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid black;
}
/* 伪元素选择器 */
div::after {
position: absolute;
top: 8px;
right: 15px;
content: " ";
width: 10px;
height: 10px;
/* 三角的制作 */
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
<body>
<div></div>
</body>
运行结果：
设置元素转换中心点 代码示例：
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 1.可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2.默认的是 50% 50% 等价于 center center */
transition: all 1s;
/* 3.可以是px */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
<body>
<div></div>
</body>
运行结果：
旋转案例 代码示例：
<style>
div {
float: left;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
overflow: hidden;
}
div::before {
display: block;
content: "嘿嘿，是我吖";
height: 100%;
width: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.3s;
}
div:hover::before {
transform: rotate(0deg);
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
运行效果：
3.2D转换之缩放 scale
可以放大和缩小。只要给元素加上了这个属性就能控制它放大还是缩小
（1）语法：
transform:scale(x,y);
（2）注意：
- x和y用逗号分隔
- scale缩放最大的优势是：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
- transform:scale(1,1) 相当于没有放大
- transform:scale(2,2) 宽和高都放大了2倍
- transform:scale(2) 只写一个参数则第二个参数和第一个参数一样
相当于 transform:scale(2,2)
代码示例 不会影响其他盒子
第一个 利用 width height 缩放会影响 注意看下面的数字位置的变化
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* transform-origin: left bottom; */
}
div:hover {
/* 里面的数字不跟单位 是倍数的意思 */
/* transform: scale(x,y); */
/* transform: scale(2, 2); */
/* 如果里面只有一个值 是在等比例缩放 同时修改宽度和高度 */
/* transform: scale(2); */
/* scale 的优势之处 不会影响其他的盒子 而且可以设置缩放的中心点 */
width: 400px;
height: 400px;
}
</style>
<body>
<div></div>
12345667
</body>
运行效果：
第二个 利用 scale 缩放会影响 注意看下面的数字位置的变化
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* transform-origin: left bottom; */
}
div:hover {
/* 里面的数字不跟单位 是倍数的意思 */
/* transform: scale(x,y); */
/* transform: scale(2, 2); */
/* 如果里面只有一个值 是在等比例缩放 同时修改宽度和高度 */
/* transform: scale(2); */
/* scale 的优势之处 不会影响其他的盒子 而且可以设置缩放的中心点 */
transform: scale(2);
/* width: 400px;
height: 400px; */
}
</style>
<body>
<div></div>
12345667
</body>
运行结果：
缩放案例：
<style>
div {
/* 放大部分隐藏 */
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all 0.4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
<body>
<div>
<a href=""><img src="sacle.jpg" alt=""></a>
</div>
<div>
<a href=""><img src="sacle.jpg" alt=""></a>
</div>
<div>
<a href=""><img src="sacle.jpg" alt=""></a>
</div>
</body>
运行效果：
分页按钮 代码如下
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
list-style: none;
text-align: center;
line-height: 30px;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
<body>
<div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</div>
</body>
显示效果：
4.2D转换综合写法
注意：
- 同时使用多个转换，其格式为：transform：translate（）retate（）scale（）…
- 其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前面
代码示例：
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .4s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性时，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
<body>
<div></div>
</body>
可以把注释的部分运行一下 会发现两个的效果是不一样的
CSS3 动画
1.动画的基本使用
制作动画分为两步：
（1）先定义动画
（2）再使用（调用）动画
用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
示例代码： 一打开浏览器 盒子从左往右走
<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>
<body>
<div></div>
</body>
动画序列：从左到右再到下到左最后回到原位置
<style>
/* from to 等价于 0% 100% */
/* @keyframes move {
from {
transform: translate(0.0);
}
to {
transform: translate(1000px, 0);
}
} */
/* 1.可以做多个状态的变化 keyframes 关键帧 */
/* 2.里面的百分比要是整数 */
/* 3.里面的百分比就是总的时间的划分 */
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>
<body>
<div></div>
</body>
2.动画常用属性
代码示例：基本包括了每个属性
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名字 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
/* 运动曲线 ease 加速 linear 匀速*/
animation-timing-function: ease;
/* 何时开始 这个是 打开浏览器后 延迟一秒后开始*/
animation-delay: 1s;
/* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
/* animation-iteration-count: infinite; */
/* 是否反向播放 默认是normal 如果想要反方向 就写 alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
animation-fill-mode: forward;
}
div:hover {
animation-play-state: paused;
}
</style>
<body>
<div></div>
</body>
3.动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；
- 简写属性里面不包含 animation-play-state
- 暂停动画：animation-play-state:paused;经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来 :animation-direction: alternate;
- 盒子动画结束后，停在结束位置：animation-fill-mode: forward;
4.速度曲线细节
animation-timer-function:规定动画的速度曲线，默认是“ease”
速度曲线步长 steps()
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让文字强制一行内显示 */
white-space: nowrap;
/* steps 就是分几步来完成我们的动画 有了 steps 就不要写 ease 或者 linear 了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
<body>
<div>
速度曲线步长很有用哦
</div>
</body>
运行效果：
CSS3 3D转换
X轴：水平向右 注意：X右边是正值 左边是负值
Y轴：垂直向下 注意：Y下面是正值 上面是负值
Z轴：垂直屏幕 注意：往外面是正值 往里面是负值
透视（perspective）写在被观察对象的父盒子上面 透视越小 物体越大
<style>
body {
/* 透视 越小 物体越大 */
/* 透视加在父亲上 */
perspective: 400px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* z轴数值的单位一般都是 px */
transform: translate3d(400px, 100px, 100px);
}
</style>
<body>
<div>
</div>
</body>
3D旋转 rotate3d
一般情况都是绕xyz轴旋转 但3D旋转里也含有自定义轴（了解即可）
例如：
transform:rotate3d(1,0,0,45deg) 沿着x轴旋转45deg
transform:rotate3d(1,1,0,45deg) 沿着对角线旋转45deg
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(360deg);
}
</style>
<body>
<img src="sacle.jpg" alt="">
</body>
显示效果：
3D呈现transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat子元素不开启3d立体空间 默认的
- transform-style:preserve-3d; 子元素开启 立体空间
- 代码写给父级，但影响的是子盒子
代码示例：
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 子元素开启立体空间 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
显示效果：
