CSS3
CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。
CSS3 被划分为模块。其中最重要的 CSS3 模块包括:
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
1. 背景透明rgba()
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha透明度,取值范围 0~1之间。
- 习惯上把0.3的0省略掉,background: rgba(0, 0, 0, .3);后面必须是 4个值。
- 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响。
- 因为是CSS3 ,所以低于 ie9 的版本是不支持的。
2. 圆角边框border-radius
- 让一个正方形变成圆圈
div{
width:100px;
height:100px;
border-radius: 50%;
}
- 其中每一个值可以为数值或百分比的形式。
圆角矩形设置4个角。
圆角矩形可以为4个角分别设置圆度, 但是是有顺序的。
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
- 如果4个角,数值相同
border-radius: 15px;
- 里面数值不同,也可以按照简写的形式,具体格式如下:
border-radius: 左上角 右上角 右下角 左下角; 遵循顺时针
3. 盒子阴影box-shadow
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
属性值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅CSS颜色值。 |
inset | 可选。将外部阴影(outset)改为内部阴影。 |
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 是默认的,但是不能写,想要内阴影可以写inset 。
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影; */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
4. CSS3 属性选择器
- 属性选择器列表
选择符 | 简介 |
---|---|
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元素 |
button {
cursor: pointer;
}
button[disabled] {
cursor: default
}
input[type=search] {
color: skyblue;
}
span[class^=black] {
color: lightgreen;
}
span[class$=black] {
color: lightsalmon;
}
span[class*=black] {
color: lightseagreen;
}
5. 结构伪类选择器
选择符 | 简介 |
---|---|
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个元素 |
ul li:first-child {
background-color: lightseagreen;
}
ul li:last-child {
background-color: lightcoral;
}
ul li:nth-child(3) {
background-color: aqua;
}
6. nth-child(n)
- 注意:本质上就是选中第几个子元素
- n 可以是数字、关键字、公式
- n 如果是数字,就是选中第几个
- 常见的关键字有
even
偶数、odd
奇数 - 常见的公式如下(如果 n 是公式,则从 0 开始计算)
- 但是第 0 个元素或者超出了元素的个数会被忽略
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 … |
n+5 | 从第5个开始(包含第5个)到最后 |
-n+5 | 前5个(包含第5个)… |
<style>
/* 偶数 */
ul li:nth-child(even) {
background-color: aquamarine;
}
/* 奇数 */
ul li:nth-child(odd) {
background-color: blueviolet;
}
/*n 是公式,从 0 开始计算 */
ul li:nth-child(n) {
background-color: lightcoral;
}
/* 偶数 */
ul li:nth-child(2n) {
background-color: lightskyblue;
}
/* 奇数 */
ul li:nth-child(2n + 1) {
background-color: lightsalmon;
}
/* 选择第 0 5 10 15, 应该怎么选 */
ul li:nth-child(5n) {
background-color: orangered;
}
/* n + 5 就是从第5个开始往后选择 */
ul li:nth-child(n + 5) {
background-color: peru;
}
/* -n + 5 前五个 */
ul li:nth-child(-n + 5) {
background-color: tan;
}
</style>
7. nth-child(n) 和 nth-of-type(n)的区别
<style>
div :nth-child(1) {
background-color: lightblue;
}
div :nth-child(2) {
background-color: lightpink;
}
div span:nth-of-type(2) {
background-color: lightseagreen;
}
div span:nth-of-type(3) {
background-color: #fff;
}
</style>
- nth-child 选择父元素里面的第几个子元素,不管是第几个类型
- nth-of-type 选择指定类型的元素
8. 伪元素选择器
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
伪类选择器注意事项:
- before 和 after 必须要有 content 属性
- before在内容前面,after 在内容后面
- before 和 after 创建的是一个元素,但是属于行内元素
- 创建出来的元素在 Dom 中查找不到,所以称为伪元素
- 伪元素和标签选择器一样,权重为 1
<style>
div {
width: 100px;
height: 100px;
border: 1px solid lightcoral;
}
div::after,
div::before {
width: 20px;
height: 50px;
text-align: center;
display: inline-block;
}
div::after {
content: '德';
background-color: lightskyblue;
}
div::before {
content: '道';
background-color: mediumaquamarine;
}
</style>
9. 伪元素添加字体图标
p {
width: 220px;
height: 22px;
border: 1px solid lightseagreen;
margin: 60px;
position: relative;
}
p::after {
content: '\ea50';
font-family: 'icomoon';
position: absolute;
top: -1px;
right: 10px;
}
10. 2D转换-移动translate
2D转换
2D 转换是改变标签在二维平面上的位置和形状
- 移动: translate
- 旋转: rotate
- 缩放: scale
translate 语法
- x 就是 x 轴上水平移动
- y 就是 y 轴上水平移动
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
注意:
- 2D的移动主要是指 水平、垂直方向上的移动
- translate 最大的优点就是不影响其他元素的位置
- translate 中的100%单位,是相对于本身的宽度和高度来进行计算的
- 行内标签没有效果,只针对块级元素
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* transform: translateX(100px); */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
transform: translateY(100px)
}
10.1. 让一个div盒子水平垂直居中
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 1. tranlate里面的参数是可以用 % */
/* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
/* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
/* transform: translateX(50%); */
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* margin-top: -100px;
margin-left: -100px;
盒子往上、向左移动自己高度、宽度的一半 */
transform: translate(-50%, -50%);
}
span {
/* translate 对于行内元素是无效的 */
transform: translate(300px, 300px);
}
</style>
11. 2D转换-旋转rotate
rotate 旋转
- 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转
-
rotate语法
/* 单位是:deg */ transform: rotate(度数)
注意:
- rotate 里面跟度数,单位是 deg
- 角度为正时,顺时针,角度为负时,逆时针
- 默认旋转的中心点是元素的中心点
使用步骤:
- 给元素添加转换属性 transform
- 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度
img:hover {
transform: rotate(360deg)
}
11.1 下拉三角案例
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
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>
11.2. 设置元素旋转中心点(transform-origin)
- transform-origin 基础语法
transform-origin: x y;
注意:
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认旋转的中心点是元素的中心 (50% 50%),等价于
center
center
- 还可以给 x y 设置像素或者方位名词(
top
、bottom
、left
、right
、center
)
12. 2D转换-缩放scale
-
scale 的作用
- 用来控制元素的放大与缩小
-
语法
transform: scale(x, y)
注意:
- 注意,x 与 y 之间使用逗号进行分隔
transform: scale(1, 1)
: 宽高都放大一倍,相当于没有放大transform: scale(2, 2)
: 宽和高都放大了二倍transform: scale(2)
: 如果只写了一个参数,第二个参数就和第一个参数一致transform:scale(0.5, 0.5)
: 缩小scale
最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
div:hover {
/* 注意,数字是倍数的含义,所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放,同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
12.1. 图片放大案例
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
12.2. 分页按钮案例
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
13. 2D 转换综合写法以及顺序问题
-
知识要点
- 同时使用多个转换,其格式为
transform: translate() rotate() scale()
- 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 同时有位移或者其他属性的时候,要将位移放到最前面
- 同时使用多个转换,其格式为
-
代码演示
div:hover { transform: translate(200px, 0) rotate(360deg) scale(1.2) }
14. 动画(animation)
动画:
- 动画是 CSS3中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。
14.1. 动画的基本使用
- 先定义动画
- 再调用定义好的动画
- 定义动画:
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
- 使用动画:
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
14.2. 动画序列
- 0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列。
- 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数。
- 用百分比来规定变化发生的时间,或用
from
和to
,等同于 0% 和 100%。
<style>
div {
width: 100px;
height: 100px;
background-color: aquamarine;
animation-name: move;
animation-duration: 0.5s;
}
@keyframes move{
0% {
transform: translate(0px)
}
100% {
transform: translate(500px, 0)
}
}
</style>
时间节点,可以更为精准的控制动画的多个状态节点,动画的变化更为丰富;
动画序列就是时间节点时的状态;
n步变化,就需要n+1个节点;
动画从开始执行到经过动画节点,都是基于上一个状态进行变化
<style>
/* from to 等价于 0% 和 100% */
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
}
/* 动画序列 */
/* 1. 可以做多个状态的变化 keyframe 关键帧 */
/* 2. 里面的百分比要是整数 */
/* 3. 里面的百分比就是总的时间(案例10s)的划分 25% * 10 = 2.5s */
@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>
14.3. 动画属性
- 丰富我们的动画特性,能做更多的属性控制;
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称 |
animation-duration | 规定动画完成一个周期所花费的时间(秒或毫秒),默认是0 |
animation-timing-function | 规定动画的速度曲线,默认是"ease" |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是"normal",alternate逆向播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"pause"。 |
animation-fill-mode | 规定动画结束后状态,保持forwards 回到起始backwards |
- animation-timing-function:动画 运动 速度曲线:速度快慢的体现;
div{
/* 匀速 */
animation-timing-function: linear;
/* 慢-快-慢 默认值 */
animation-timing-function: ease;
/* 慢-快 */
animation-timing-function: ease-in;
/* 快-慢 */
animation-timing-function: ease-out;
/* 慢-快-慢 */
animation-timing-function: ease-in-out;
}
- steps(),不连续的,一小步一小步在跳,使用场景: UI给我们是分帧图,格子图;
- animation-timing-function:steps(n) 分步 实现 老电影一帧一帧,整个动画分为几步骤完成
/* 分步 实现 老电影一帧一帧,整个动画分为几步骤完成*/
animation-timing-function: steps(n);
- animation-delay:动画推迟多久执行;动画得等待。
- animation-iteration-count:播放循坏次数 1 2 infinite 无限次 iteration:循环;
div{
/* 指定次数设置 */
animation-iteration-count: 2;
/* 无限次数设置 */
animation-iteration-count: infinite;
}
- animation-direction:循环方向:若0% 红色; 100% 黑色
div{
/*1 默认值 0-100 */
animation-direction: normal;
/*2 100-0 */
animation-direction: reverse;
/*3 0-100-0 最少要执行两次动画*/
animation-direction: alternate;
/*4 100-0-100 */
animation-direction: alternate-reverse;
}
- animation-fill-mode:动画等待或者结束的状态设置;
div{
/*1 动画结束后,元素样式停留在 100% 的样式 */
animation-fill-mode: forwards;
/*2 在延迟等待的时间内,元素样式停留在 0% 的样式
动画结束的时候,回到div本身的样式(回到起始状态)*/
animation-fill-mode: backwards;
/*3 同时设置了 forwards和backwards两个属性值
在动画等待时间,样式为元素样式停留在 0% 的样式,
动画结束时,元素样式停留在 100% 的样式*/
animation-fill-mode: both;
}
- animation-play-state:暂停和播放, 鼠标控制, 不常用,经常和鼠标经过等其他配合使用
div{
/*1 播放 */
animation-play-state: running;
/*2 暂停*/
animation-play-state: paused;
}
- 设置 animation-direction ,需设置动画多次执行;
- 要想动画走回来,而不是直接调回来:
animation-direction: alternate
- 要想动画走回来,而不是直接调回来:
- 设置 animation-fill-mode,不能设置 无限 执行;
- 盒子动画结束后,停在结束位置:
animation-fill-mode: forwards
- 盒子动画结束后,停在结束位置:
14.4. 动画简写
- 简单把动画属性写在一起,代码简单;vscode有提示;
- 简写:动画名称 持续时间 速度曲线 等待时间 执行次数 执行的方向 动画等待或结束的状态
div{
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态
}
- 组动画:需要用 逗号 隔开;
animation: name_1 5s linear,name_2 2s linear;
- animation-play-state 没有在简写内
- 记忆:知道意思即可,记不住去查就行;
div {
width: 100px;
height: 100px;
background-color: aquamarine;
animation-name: move; /* 动画名称 */
animation-duration: 2s; /* 动画花费时长 */
animation-timing-function: ease-in-out; /* 动画速度曲线 */
animation-delay: 2s; /* 动画等待多长时间执行 */
animation-iteration-count: infinite; /* 规定动画播放次数 infinite: 无限循环 */
animation-direction: alternate; /* 是否逆行播放 */
animation-fill-mode: forwards; /* 动画结束之后的状态 */
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}