动画实现步骤
第一种定义 两种状态过程
使用动画的属性 animation: change（动画名称） 3s; 需要添加才能产生播放效果
定义动画的属性 @keyframes :(动画名称) 固定属性代码 两个代码动画名称一致方能生效
.box{
width: 200px;
height: 200px;
background-color: #ccc;
/* 使用动画:动画名称 动画时长（变化的过程展示时间） */
animation: change 3s;
}
/* 定义动画：取名称 从1到2的变化 */
@keyframes change {
from{
width: 200px;
}
to{
width: 600px;
}
}
动画百分比
第二种百分比定义效果
.box{
width: 200px;
height: 200px;
background-color: #ccc;
animation: change 5s;
}
/* 定义动画：200到500*300到800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0%{
width: 200px;
}
20%{
width: 500px;
height: 300px;
}
80%{
width: 800px;
height: 500px;
}
}
动画复合属性
使用动画:动画名称 动画时长 速度曲线(linear:均速）延迟时间(直接时间加s) 重复次数（数字或infinite代表无限循环）动画方向 执行完毕时的状态；
使用动画:动画名称 动画时长 速度曲线(linear:均速）
animation: change 3s linear;
速度曲线：
1、设置 元素变化的时候 均速变化 还是先快后慢 先慢后快
2、均速最常用 linear
3、ease 先慢后快 默认
4、另一种方式：steps（分步数）分步动画 跳跃的速度曲线
animation: change 3s steps(3)
使用动画:
动画名称 动画时长 速度曲线 延迟时间(直接时间加s) 重复次数（数字或infinite代表无限循环）
animation: change 3s steps(3) 1s 3;
重复次数（infinite代表无限循环 动画方向：alternate｛反方向｝）这两个比较常用
1、默认值 normal 先正再正 常用
2、alternate 先正再反 常用
3、reverse 先反再正
4、alternate-reverse 先反再正
animation: change 3s steps(3) 1s infinite alternate;
alternate-reverse 先反再正*
animation-direction:alternate-reverse;
执行完毕时的状态
默认值:backwards 停留最初状态 动画停留在结束状态:forwards
/* 执行完毕时的状态要生效不能添加重复属性和动画方向 */
animation: change 3s 1s forwards;
暂停动画 :paused为暂停，通常配合:hover使用
animation-play-state: paused;
默认值 播放：
animation-play-state: running; 基本不用管
.box:hover{
/* 鼠标移入的时候暂停动画 */
animation-play-state: paused;
}
both 可以同时设置backwards 和 forwards 替换这两个词 不常用
复合属性拆分成单个代码的属性
逐帧动画 与 多组动画
.box{
width: 140px;
height: 140px;
background-image: url(../day02/01-课堂案例/02-动画/images/bg.png);
border: 1px solid #000;
/* 12是精灵图里小人图的个数 */
animation: move 1s steps(12) infinite,
/* 逗号隔开可以实现多组动画效果 互不影响 */
box 5s forwards;
}
@keyframes move {
from{
background-position: 0 0;
}
to{
/* 1680是精灵小图的宽度 */
background-position: -1680px 0;
}
}
@keyframes box {
from{
transform: translateX(0);
}
to{
transform: translateX(800px);
}
}
轮播图
定义动画：位移 ul 左/右侧移动使用 左负右正
ul{
width: 4800px;
animation: move 7s linear infinite;
}
/* 定义动画：位移 ul 左侧移动使用 x -2400 */
@keyframes move {
to{
transform: translateX(-2400px);
}
}
.box:hover ul{
animation-play-state: paused;
}
.box{
margin: 100px auto;
width: 1200px;
height: 210px;
border: 5px solid #000;
overflow: hidden;
}
ul li{
float: left;
list-style: none;
}
img{
width: 600px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="../../爱情公寓5英明3440x1440带鱼屏壁纸_彼岸图网.jpg" alt=""></li>
<li><img src="../../爱情公寓5张伟请坐高清壁纸3440x1440_彼岸图网.jpg" alt=""></li>
<li><img src="../../黑马开学/王者荣耀金蝉渡世行者4k壁纸_彼岸图网.jpg" alt=""></li>
<li><img src="../../爱情公寓5张伟专业团队双屏高清壁纸5120x1440_彼岸图网.jpg" alt=""></li>
<li><img src="../../爱情公寓5英明3440x1440带鱼屏壁纸_彼岸图网.jpg" alt=""></li>
<li><img src="../../爱情公寓5张伟请坐高清壁纸3440x1440_彼岸图网.jpg" alt=""></li>
<li><img src="../../黑马开学/王者荣耀金蝉渡世行者4k壁纸_彼岸图网.jpg" alt=""></li>
<li><img src="../../爱情公寓5张伟专业团队双屏高清壁纸5120x1440_彼岸图网.jpg" alt=""></li>
</ul>
</div>
1 静态 html结构：
box 显示 边框 里面 大的div 存放多个小图片 后期移动的时候 只移动装着小图片的盒子就行
2 动态效果 1 inner盒子 从右往左移动
3 无缝滚动 技巧
** 1 两个大盒子**
1 外层盒子 设置 眼看宽度和高度
2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ）
2 真实存放的图片张数 比实际的要多
1 多多少 看你一下的外层盒子能装几张 （浮动）
3 设置动画
1 设置内层盒子的位移 等于 真实的那几张图片的位移！
2 设置动画无线滚动！！ *-->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 1440px;
height: 270px;
background-color: aqua;
margin: 200px auto;
overflow: hidden;
}
.inner {
/* 需要加上三张图片的宽度 */
width: 4800px;
height: 270px;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
transform: translateX(-3360px);
}
}
img {
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<img src="./images/1.jpg" alt="" />
<img src="./images/2.jpg" alt="" />
<img src="./images/3.jpg" alt="" />
<img src="./images/4.jpg" alt="" />
<img src="./images/5.jpg" alt="" />
<img src="./images/6.jpg" alt="" />
<img src="./images/7.jpg" alt="" />
<!-- 技巧 故意增加前面张三张图片下去 -->
<img src="./images/1.jpg" alt="" />
<img src="./images/2.jpg" alt="" />
<img src="./images/3.jpg" alt="" />
</div>
</div>
</body>
</html>
过渡属性扩展
过渡也有4个属性
1、想要实现过渡的 css属性名 宽width 高 全选（all） transition-property：width (单个属性名的选择） 或 all；
2、过渡的持续时间 transition-duration：3s；
3、过渡的延迟时间 transition-delay：3s；
4、过渡的速度曲线 transition-timing-function： steps（4）；
5、复合写法 transition：all 3s steps（4） 2s（延迟）；类似动画写法
移动端的屏幕页面
动态加载多倍图 srcset基本很少用
1、一套代码可以自动识别当前的屏幕的清晰度 自动加载对应的清晰度的图片
2、解决方案 srcset 在img里添加
如 三张图片 1倍图 2倍图 3倍图
用逗号隔开
<img srcset="./images/1.jpg 1x, ./images/2.jpg 2x, ./images/3.jpg 3x," alt="">
视口-了解
视口是指手机浏览器内显示页面的区域，一般可以认为视口的宽度等于网页的根标签html的宽度
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum/> -->
<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.04 minimum-scale=1 假如 允许缩放，最小缩放的倍数
1.0
5 user-scalable=no 控制是否允许 用户双击 手指 捏合的手势来缩放 网页1 no 不允许
6 工作的用的用法
1直接使用 vscode 自动生成的即可
2 自己再写一次 快捷写法 meta:vp+tab
3 其他公司的网页 视口代码 拷贝过来即可淘宝
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no,viewport-fit=cover">京东
<meta name="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=8":代码存在一些区别 无所谓 功能都是一样 没有必要去纠结它 直接使用即可!!!
