CSS3
transition： 要过度的属性 用时 运动曲线 何时开始 (连写方式)
transition：XXX XXX XXX XXX , XXX XXX XXX XXX; 如果需要多组属性用逗号隔开
属性名：transition
| **transition属性** | 描述 |
| ----------------- | ------------------- |
| transition-property| 规定应用过渡的 CSS 属性的名称。<br/>all 代表所有,省去写多组 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。<br/>类似贝塞尔线的运动轨迹 |
| transition-delay | 规定过渡效果何时开始。默认是 0。<br/>鼠标移动到之后几秒触发 |
过渡属性，写在控件身上，并不是写在事件上
## CSS3 属性选择器
```
<style> // 通过属性选择某个选择器，节省class命名和调用
button[disabled] {
disabled: none;
}
</style> // 属性权重是：10;
<button disabled="disabled" > 按钮 </button>
```
这种可以筛选某些控件等于特定需要的值
```
<style> // 这种可以过滤属性等于某个特定的值，来实现
input[type="text"] {
color: pink;
}
</style> // 属性权重是：10;
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
```
^取属性值的开头部分来匹配,相当于匹配头
$取属性值的结尾部分来匹配,相当于匹配尾
*取属性值的包含中匹配的上的则选中,相当于搜索
```
<style> // ^是以什么属性的值为开头,相当于是取前部分来匹配
div[class^="icon"] {
color: pink;
}
div[class*="icon"] {
color: pink;
}
</style> // 属性权重是：10;
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
```
## CSS3 结构伪类选择器
nth-child(n) // n可以说even或者odd 奇数和偶数 ，也可以是单个数字，也可以用公式
公示从0开始，但是第0个元素或者超出了元素的个数则会被忽略
nth-of-type()跟nth-child()使用方法一样，只是能选择指定元素
```
div span :nth-of-type(2){
color:pink;
}
<div>
<p></p>
<span></span>
<span></span>
<span></span>
</div>
```
- 注意：本质上就是选中第几个子元素
- n 可以是数字、关键字、公式
- n 如果是数字，就是选中第几个
- 常见的关键字有 `even` 偶数、`odd` 奇数
- 常见的公式如下(如果 n 是公式，则从 0 开始计算)
- 但是第 0 个元素或者超出了元素的个数会被忽略
## CSS3 伪元素选择器
两个就是在标签内文字前后加内容,一般用来放图标文字，节省元素
伪类选择器注意事项
- `before` 和 `after` 必须有 `content` 属性
- `before` 在内容前面，after 在内容后面
- `before` 和 `after` 创建的是一个元素，但是属于行内元素
- 创建出来的元素在 `Dom` 中查找不到，所以称为伪元素
- 伪元素和标签选择器一样，权重为 1
## 2D转换
### 移动
```
transform: translate(x, y) // 使用方法类似click,单位px
transform: translateX(x) // 只移动X
transfrom: translateY(y) // 只移动Y
transform: translate(-50%, -50%) // 左 上 移动自身50%
```
- `2D` 的移动主要是指 水平、垂直方向上的移动
- `translate` 最大的优点就是不影响其他元素的位置
- `translate` 中的100%单位，是相对于本身的宽度和高度来进行计算的
- 行内标签没有效果
### 旋转
```
/* 单位是：deg */
transform: rotate(度数deg)
```
- `rotate` 里面跟度数，单位是 `deg`
- 角度为正时，顺时针，角度为负时，逆时针
- 默认旋转的中心点是元素的中心点
### 设置旋转中心点
```
transform-origin: x y;
transform-origin: left bottom;
transform-origin: 0% 100%;
transform-origin: 0 100px;
```
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 `center` `center`
- 还可以给 x y 设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center`)
### 放大缩小
`transform: scale(2, 2)`
- 注意，x 与 y 之间使用逗号进行分隔
- `transform: scale(1, 1)`: 宽高都放大一倍，相当于没有放大
- `transform: scale(2, 2)`: 宽和高都放大了二倍
- `transform: scale(2)`: 如果只写了一个参数，第二个参数就和第一个参数一致
- `transform:scale(0.5, 0.5)`: 缩小
- `scale` 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
### 综合连写写法
`transform: translate(Xpx,Ypx) rotate(180deg) scale(1.1, 1.1)`
- 同时使用多个转换，其格式为 `transform: translate() rotate() scale()`
- 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前面
## 渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
分类：
* 线性渐变
!
* 径向渐变
### 线性渐变
```css
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
```
取值：
* 渐变方向：可选
* to 方位名词
* 角度度数
* 终点位置：可选
* 百分比
### 案例-产品展示
* HTML 结构
```html
<div class="box">
<img src="./images/product.jpeg" alt="" />
<div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
<div class="mask"></div>
</div>
```
* CSS 样式
```css
.mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.5)
);
opacity: 0;
transition: all .5s;
}
.box:hover .mask {
opacity: 1;
}
```
### 径向渐变
```css
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
```
取值：
* 半径可以是2条，则为椭圆
* 圆心位置取值：像素单位数值 / 百分比 / 方位名词
## 动画
```
// CSS定义
// 定义动画的写法
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
/* 上面与下面这两个的方式的一样，只是百分比与英文的区别*/
@keyframes 动画名称 {
form {
width: 100px;
}
to {
width: 200px
}
}
/* 多状态情况下的使用方法 */
/*1.可以做多个状态的变化*/
/*2.里面的百分比要是整数,不能为小数*/
/*3.里面的百分比就是总时间的百分比*/
@keyframes 动画名称 {
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)
}
}
```
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%
```
// CSS中使用
div {
/* 调用动画 动画名称为上面定义动画的名称*/
animation-name: 动画名称;
/* 持续时间 单位为:s (秒))*/
animation-duration: 持续时间；
}
```
### 动画的属性
| 属性 | 作用 | 描述 |
| ----------------- | ------------------- | ------------------- |
| @keyframes | | 规定动画。 |
| animation | | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 动画名称 | 规定@keyframes动画的名称。(必须的) |
| animation-duration | 动画时长 | 规定动画完成一个周期所花费的秒或毫秒，默认是0。(必须的) |
| animation-timing-function | 速度曲线 | 规定动画的速度曲线，默认是"ease"慢-快-慢,linear匀速,steps(3)走几步|
| animation-delay | 延迟时间 | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 重复次数 | 规定动画被播放的次数，默认是1，还有infinite无限循环 |
| animation-direction | 动画执行方向 | 规定动画是否在下一周期逆向播放<br>默认是{normal} {alternate}反复播放,{reverse}反向播放|
| animation-fill-mode | 动画执行完毕<br>时状态 | 规定动画结束后状态<br>{forwards}最后一帧状态 {backwards}第一帧状态 |
| animation-play-state | 暂停动画 | 规定动画是否正在运行或暂停。<br>默认是{running}运行,还有{paused}暂停 |
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
```
animation: name duration timing-function delay iteration-count direction fill-mode
```
- 简写属性里面不包含 `animation-paly-state`
- 暂停动画 `animation-paly-state: paused`; 经常和鼠标经过等其他配合使用
- 要想动画走回来，而不是直接调回来：`animation-direction: alternate`
- 盒子动画结束后，停在结束位置：`animation-fill-mode: forwards`
- timing-function 这个值得属性看下面，一般如果匀速播放用:linear
animation-timing-function 速度曲线的属性值，就是动画的运行速度
/* 我们元素可以添加多个动画， 用逗号分隔 */
## 3D转换
- x 轴：水平向右 -- **注意：x 轴右边是正值，左边是负值**
- y 轴：垂直向下 -- **注意：y 轴下面是正值，上面是负值**
- z 轴：垂直屏幕 -- **注意：往外边的是正值，往里面的是负值**
- `3D` 位移：`translate3d(x, y, z)`
- `3D` 旋转：`rotate3d(x, y, z)`
- 透视：`perspctive`
- `3D`呈现 `transfrom-style`
- `3D` 移动就是在 `2D` 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
### 3D移动
```
transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px, 100px, 100px)
```
- `transform: translateX(100px)`：仅仅是在 x 轴上移动
- `transform: translateY(100px)`：仅仅是在 y 轴上移动
- `transform: translateZ(100px)`：仅仅是在 z 轴上移动
- `transform: translate3d(x, y, z)`：其中x、y、z 分别指要移动的轴的方向的距离
- **注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充**
### 透视
```
/*透视需要写在被视察元素的父盒子上面*/
perspective:100px;
```
- **透视需要写在被视察元素的父盒子上面**
### 3D旋转
`transform: rotate3d(x, y, z, 45deg)`
- 注意下方图片
- d：就是视距，视距就是指人的眼睛到屏幕的距离
- z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大
- `transform: rotateX(45deg)` -- 沿着 x 轴正方向旋转 45 度
- `transform: rotateY(45deg)` -- 沿着 y 轴正方向旋转 45 度
- `transform: rotateZ(45deg)` -- 沿着 z 轴正方向旋转 45 度
- `transform: rotate3d(x, y, z, 45deg)` -- 沿着自定义轴旋转 45 deg 为角度
### 3D呈现
`transform-style:preserve-3d;`
- 控制子元素是否开启三维立体环境
- `transform-style: flat` 代表子元素不开启 `3D` 立体空间，默认的
- `transform-style: preserve-3d` 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
## meta视口标签
```
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
```
## 背景缩放
background-size: 背景图片宽度 背景图片高度;
单位：长度|百分比|cover|contain
单位为%时,是按照父盒子的百分比的尺寸，并不是背景图的百分比
cover 会完全覆盖整个父盒子的尺寸，但会导致图部分内容因为比例问题显示不全
contain 把图片尺寸扩展至最大尺寸，以使其宽度和高度完全适应内容区域,相当于等比例放大
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档
官网地址： <http://necolas.github.io/normalize.css/>
## CSS3盒子模型
box-sizing: border-box;
传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了
## CSS3 清除样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
让盒子在最大和最小的区间内显示
max-width:xPX
min-width:xPX
## 二倍精灵图
在firework里面把精灵图等比例缩放为原来的一半
之后根据大小测量坐标
background-size: 精灵图原来宽度的一半
## flex布局
```
display:flex; 通过为父盒子添加flex属性，来控制子盒子的位置和排列方式
```
```
父级元素的属性有以下六个
flex-direction: 设置主轴的(默认X,可以修改为Y)方向,设置子元素在父盒子的位置
justify-content: 设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴(默认Y,可以修改为X)上的子元素的排列方式(多行)
align-items: 设置侧轴(默认Y,可以修改为X)上的子元素排列方式(单行)
flex-flow: 复合属性，相当于同时设置flex-direction和flex-wrap
```
```
flex-direction: row; 默认值从左到右,设置为横向布局
row-reverse 从右到左,设置为横向布局
column 从上倒下,设置为纵向布局
column-reverse 从下到上,设置为纵向布局
```
```
justify-content: flex-start 默认值从头部开始,设置X为主轴,则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(主轴是X则水平居中)
space-around 平分剩余空间
space-between 先两边贴边在平分剩余中间空间
```
```
flex-wrap: nowrap; 不换行 可以用来溢出掉下去的解决
wrap; 换行
```
```
align-content: flex-start 默认值从上到下
flex-end; 从下到上
center; 居中
stretch; 拉伸
space-around 平分剩余空间
space-between 先两边贴边在平分剩余中间空间
```
```
align-items: flex-start 默认值从上到下
flex-end; 从下到上
center; 居中
stretch; 拉伸
```
```
flex-flow: column wrap; 连写
```
### 子项常见属性
```
子项常见属性
flex:1; 每个子项占用数量
.pr span { // 以下案例为3个盒子中的第二个盒子占50%,另外两个盒子占25%
flex:1;
background-color: blue;
}
.pr span:nth-child(2){ // 这个会覆盖上面中第二个盒子的数值
flex:2;
}
align-self 控制子项自己在侧轴上的排列方式
order 与 z-index 效果类似，但不一样
```
## rem布局
rem和em的区别在于，rem是基于html文字大小来改变，em是基于父元素来改变大小
```
媒体查询 可以根据不同的屏幕尺寸在改变不同的样式
@media mediatype and|not|oly (media feature){
css-Code;
}
@media scree and (max-width:800px){}
@media screen and (min-width:540px) and (max-width: 969px){}
```
用@media开头
| **mediatype属性** | 描述 |
| ----------------- | ------------------- |
| all | 所有设备 |
| print | 打印机设备 |
| scree | 用于电脑,平板,手机 |
关键字 and not only 一般用and
media feature 媒体特性必须小写括号包含
width 定义设备中页面可见区域的宽度
min-width 定义设备可见最小宽度
max-width 定义设备可见最大宽度
通过媒体查询让基于rem的文字，随网页大小改变而改变
```
通过媒体查询让基于rem的文字，随网页大小改变而改变
div {
width: 100%;
height: 1rem;
background-color: green;
color: white;
text-align: center;
line-height: 1rem;
font-size: .5rem;
}
@media screen and (max-width: 539px){
html {
font-size: 30px;
}
}
@media screen and (min-width:540px ) and (max-width: 969px){
html {
font-size: 60px;
}
}
@media screen and (min-width: 970px){
html {
font-size: 90px;
}
}
```
引入资源,按网页宽度改变CSS方法，使网页发生很大改变
```
<link rel="stylesheet" href="style1.css" media="screen and (max-width: 539px)">
<link rel="stylesheet" href="style2.css" media="screen and (min-width: 540px)">
```
## vw适配方案
### vw和vh基本使用
vw和vh是相对单位，相对视口尺寸计算结果
* vw：viewport width（1vw = 1/100视口宽度 ）
* vh：lviewport height ( 1vh = 1/100视口高度 )
### vw布局
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
### vh问题
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
## Less
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件
### 注释
* 单行注释
* 语法：// 注释内容
* 快捷键：ctrl + /
* 块注释
* 语法：/* 注释内容 */
* 快捷键： Shift + Alt + A
### 运算
* 加、减、乘直接书写计算表达式
* 除法需要添加 小括号 或 .
* 表达式存在多个单位以第一个单位为准
### 嵌套
作用：快速生成后代选择器
!
提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用
### 变量
概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
* 定义变量：@变量名: 数据;
* 使用变量：CSS属性：@变量名;
```less
// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}
```
### 导入
作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：如果是 less 文件可以省略后缀
```less
@import './base.less';
@import './common';
```
### 导出
写法：在 less 文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加 /
导出less为css文件,方便调试
```less
// out: ./index.css
// out: ./css/
```
### 禁止导出
写法：在 less 文件第一行添加: // out: false
## 响应式布局
Bootstrap栅格系统
container 会分隔当前界面为12个格子
+ 按照不同屏幕划分为1~12 等份
+ 行（row） 可以去除父容器作用15px的边距
+ xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
+ 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
+ 每一列默认有左右15像素的 padding
+ 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"
```
<div class="container"> // 选择container划分
<div class="row"> // 设置div为横向显示
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div> // 设置div在大屏，中屏，小屏的时候占用的份额，xs sm md lg 为显示大小
<div class="col-lg-3">
<div class="row"> // 支持嵌套,且嵌套里面在放入一个行，会更好一些，消除父元素有一个15像素的padding问题
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset-4">右侧</div> // offset为左边偏移分数=总份数 - 实际使用分数
</div>
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div> // 向右推过去8个份额 移位
<div class="col-md-8 col-md-pull-4">右侧</div> // 向左推过去4个份额 移位
</div>
</div>
</div>
</div>
```
响应式工具显示
```
hidden-xs hidden-sm hidden-md hidden-lg 对应尺寸会隐藏显示
visible-xs visible-sm visible-md visible-lg 对应尺寸会显示
```
## Bootstrap
### 简介
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: <https://www.bootcss.com/>
### 使用步骤
#### 下载
下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件
#### 使用
1. 引入 Bootstrap CSS 文件
```html
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
```
2. 调用类名： container 响应式布局版心类
```html
<div class="container">测试</div>
```
### 栅格系统
作用：响应式布局
栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数
例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）
* row 类：行，可以让内容在一行排（flex布局）
### 全局样式
#### 按钮
类名
* btn：默认样式
* btn-success：成功
* btn-warning：警告
* ……
* 按钮尺寸：btn-lg / btn-sm
#### 表格
表格类：
* table：默认样式
* table-striped：隔行变色
* table-success：表格颜色
* ……
### 组件
1.引入样式表
2.引入 js 文件
3.复制结构，修改内容
### 字体图标
#### 下载
导航 / Extend：图标库 → 安装 → 下载安装包 → [bootstrap-icons-1.X.X.zip](https://github.com/twbs/icons/releases/download/v1.10.3/bootstrap-icons-1.10.3.zip)
#### 使用
1. 复制 fonts 文件夹到项目目录
2. 网页引入 bootstrap-icons.css 文件
3. 调用 CSS 类名（图标对应的类名）
```html
<i class="bi-android2"></i>
```