动画
作用和本质
1.过渡实现的是两个状态的变化过程，可以理解为1到2
2.动画效果：快速切换大量图片在大脑形成连续性画面.
实现多个状态的变化，可以有多种动画
目标：使用animation 添加动画效果
实现步骤：
1，定义动画
/* 第一步，定义动画 */
@keyframes move {
/* 里面写想改变的元素 */
from {
width: 300px;
}
to {
border-radius: 50%;
}
}
/* 百分比写法 */
@keyframes go {
10% {
width: 400px;
}
40% {
border-radius: 50%;
}
100% {
width: 300px;
}
2,使用动画
div {
width: 200px;
height: 200px;
background-color: red;
margin: 200px auto;
/* 第二步，使用动画：写第一步定义的名字后面接时长 */
animation: move 1s;
}
animation复合属性
animation属性了解(可以连写的，下面单词不用死记硬背，知道是干嘛的，和首字母)
/* 全都可以用animation： 连写，以下为了解 */
/* 1.动画名字 */
animation-name: move;
/* 2.动画时长 */
animation-duration: 2s;
/* 3.延迟时间 */
animation-delay: 1s;
/* 4.动画播放完的状态 */
/* 停在最开始 */
animation-fill-mode: backwards;
/* 停在最后 */
animation-fill-mode: forwards;
/* 两者都有 */
animation-fill-mode: both;
/* 5.动画播放的重复次数 */
/* 无限循环 */
animation-iteration-count: infinite;
/* 6.播放方向 */
/* 默认值：noral
reverse 先反再正
alternate 先正再反，最常用*/
animation-direction: alternate;
animation-play-state: paused;
/* 8.速度曲线
匀速 linear
ease 慢到快到慢 默认
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束*/
animation-timing-function: linear;
}
/* 7.设置动画 暂停还是播放的状态 一般配合hover
paused暂停 running跑起来*/
div:hover {
animation-play-state: running;
}
精灵案例实现步骤思路与细节
<style>
div {
/* 第一步：设置一个盒子与人物宽高相同 */
width: 140px;
height: 140px;
/* 第二步：添加背景图 */
background-image: url("./images/bg.png");
/* 第四步：给移动的动画使用特效 */
animation: run 1.3s infinite steps(12),
/* 第五步：给元素加上第二个动画，用逗号隔开 */
move 4s forwards;
}
/* 第三步：给背景图向后拖动(移动) */
@keyframes run {
100% {
background-position: -1680px;
}
}
/* 第五步：盒子有位移，也就是小人往右跑，给盒子来个移动动画 */
@keyframes move {
100% {
transform: translateX(600px);
}
}
</style>
思路
1.分析动画本身
2.盒子会移动
3.两个动画可以写在同一个元素
走马灯案例思路和细节
思路
1.两个大盒子，一个外面框柱，一个在里面放多张图片
2.让图片向左移动自身宽度
3.因为移动自身宽度，所以当图片位移出去时，外框就留白了。
4.这个时候把前三张图片补上去，位移不改，这样多出的三张就在外框里
5.最后设置无限滚动
想法
因为导致盒子空缺是因为位移了图片盒子的整体宽度，那我就让位移宽度减掉大盒子宽，也就是减少三张图的宽度让图片结束时刚好还在盒子内部。不过这样不能无缝衔接，有卡顿。
老师思路
1 静态 html结构 box 显示 边框 里面 大的div 存放多个小图片 后期移动的时候 只移动装着小图片的盒子就行
2 动态效果
1 inner盒子 从右往左移动
3 无缝滚动 技巧
1 两个大盒子
1 外层盒子 设置 眼看宽度和高度
2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ）
2 真实存放的图片张数 比实际的要多
1 多多少 看你一下的外层盒子能装几张 （浮动）
3 设置动画
1 设置内层盒子的位移 等于 真实的那几张图片的位移！
作业思路技巧总结：
一、敲代码思路
1.第一步看案例效果，先做好HTML结构
2.做好结构后设置CSS和动画
3.最后在把图片套进去
总结：其实也是从大到小，从大体到细致去操作。
二、小技巧总结
1.当高度比大图大 不一致时，谷歌和EDGE没有效果ie和火狐有效果
谷歌对于大图片结合背景效果时 不稳定有BUG
2.当场景是hover才出动画，那么要把使用动画放在hover里，hover就使用
定义动画正常写
怎么查看css兼容问题
百度caniuse
移动WEB
1.移动WEB手机屏幕常识(了解)
知道如何使用谷歌浏览器手机模拟器
f12 然后点击小手机图标
目的：了解移动端手机屏幕常识
手机屏幕参数
逻辑分辨率：屏幕宽高 单位PX(可以改变)
设备分辨率：屏幕中一共拥有的物理像素点的个数(不能改变)
物理像素点： 指的是屏幕显示的最小颗粒，是物理真实存在的。
同样大小的屏幕，设备分辨率越大越好
PPI单位英寸内物理像素点个数
设备像素比 设备分辨率和逻辑分辨率的比例
掌握动态加载多背图
<body>
<!-- 一套代码自动识别屏幕分辨率，自动加载对应清晰度图片-->
<!-- 1x一倍图 默认PC -->
<img srcset="C:\Users\棟\图\Snipaste_2022-03-16_18-21-08.png 1x, C:\Users\棟\图\Snipaste_2022-03-16_21-55-34.png 2x, C:\Users\棟\图\Snipaste_2022-03-16_22-10-47.png 3x" />
<!-- 目前前端主流看待多背图 解决方式
1 不会出现一倍屏幕
2 公司直接用 3 或2 倍图
二倍手机浪费一点流量加载不能显示完毕的三倍图
直接 -->
<!-- 美工给啥就用啥 直接用src -->
<img src="三倍图" alt="">
</body>
了解视口的概念
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
手机浏览器显示页面的区域
视口宽度和网页根标签一样
**网页的宽度和逻辑分辨率尺寸相同**
布局视口 (了解)
早期手机想看PC网页，直接缩小网页放入手机浏览器
网页版心都是小于等于980px
理想视口(常见)
现在移动端常用
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- meta 标签 对网页设置 语音 设置seo 关键字
name 告诉meta标签 要设置什么 地方 viewport 视口
content 设置了哪些内容
1 width=device-width 视口宽度等于屏幕宽度
2 initial-scale=1.0 设置网页打开时缩放倍数 1.0 没有缩放
有需要就缩放网页！！
3 maximum-scale=1 假如 允许缩放 最大缩放的倍数 1.0
4 minimum-scale=1 假如 允许缩放 最小缩放的倍数 1.0
5 user-scalable=no 控制是否允许 用户双击 手指 粘合手势 缩放网页
1 no 不允许 靠不同厂商浏览器自动缩放 脱离了开发者的控制
2 真要缩放 自己写JS代码 来控制做到不同浏览器 一样手势 功能一样
6 工作中的用法
1 自动VSC生成
2 快捷写法 meta:vp
3 看其他公司网页视口代码 拷贝过来
各大网页代码存在一些区别 无所谓 功能都一样 不用纠结直接用！！！-->
百分比布局
移动端布局和PC端区别
1 pc端
定版心
页面中元素宽高几乎用pX 定死大小
2 移动端
不定版心
元素大小很少用px 用百分比单位 屏幕大 元素大
3 早期移动端布局
百分比布局 也叫 流式布局
4 早期布局方案 弊端
1 不够方便 一旦增加 元素方式 对于宽代码重新计算
5 主流移动端布局方案
flex！！！！！好用简单方便 都的要学会！！！！
FLEX布局 浏览器所提倡的布局模型 灵活简单
1.首先设置 DIV 变成 Flex 盒子 也叫 弹性盒子 快捷写法：df
2.这个时候div中的子元素就会激活斗帝血脉 发生改变
1 设置了flex 的盒子 称之为 父项
2 盒子里面的子元素 称之为 子项
3.具体变化
1 不在区分 块 行内块 行内元素 都可以设置宽高 脱离了天地束缚
2 子项 默认的宽度和高度 宽由内容撑开 高度＝父项的高
3 子项 使用浮动没有效果了 使用 定位 margin transform都有效果
4 默认情况下 子项总宽度若是大于 父项宽 也不会换行 ！！！ flex不会换行
只会压缩自己的宽度，我称为自适应
主轴对齐方式
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
属性：justify-content：flex-start (默认值)
左对齐 flex-start
右对齐 flex-end
居中对齐 center
