建议收藏！HTML5-CSS3-动画详解-附有案例奔跑的熊⼤[附带代码]⼀、rotate
2d旋转指的是让元素在2维平⾯内顺时针旋转或者逆时针旋转
使⽤步骤：
1. 给元素添加转换属性 transform
2. 属性值为 rotate(⾓度) 如 transform:rotate(30deg) 顺时针⽅向旋转30度
div{
transform:rotate(0deg);
}html中的5种空格表示
⼆、三⾓
代码演⽰
⼆、设置元素旋转中⼼点(transform-origin)
1. transform-origin 基础语法
transform-origin: x y;
2. 重要知识点
注意后⾯的参数 x 和 y ⽤空格隔开
x y 默认旋转的中⼼点是元素的中⼼ (50% 50%)，等价于 center center
还可以给 x y 设置像素或者⽅位名词(top、bottom、left、right、center)
三、旋转中⼼案例
代码演⽰
四、2D转换之scale
1. scale 的作⽤
1. ⽤来控制元素的放⼤与缩⼩
2. 语法
transform:scale(x, y)
3. 知识要点
1. 注意，x 与 y 之间使⽤逗号进⾏分隔
2. transform: scale(1, 1): 宽⾼都放⼤⼀倍，相当于没有放⼤
3. transform: scale(2, 2): 宽和⾼都放⼤了⼆倍
4. transform: scale(2): 如果只写了⼀个参数，第⼆个参数就和第⼀个参数⼀致
5. transform:scale(0.5, 0.5): 缩⼩
6. scale 最⼤的优势：可以设置转换中⼼点缩放，默认以中⼼点缩放，⽽且不影响其他盒⼦4. 代码演⽰
div:hover{
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等⽐缩放，同时修改宽与⾼ */
/* transform: scale(2) */
/* ⼩于 1 就等于缩放*/
transform:scale(0.5, 0.5)
}
五、图⽚放⼤案例
代码演⽰
六、分页按钮案例
代码演⽰
七、2D转换综合写法以及顺序问题
1. 知识要点
同时使⽤多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴⽅向)
但我们同时有位置或者其他属性的时候，要将位移放到最前⾯
2. 代码演⽰
div:hover{
transform:translate(200px, 0)rotate(360deg)scale(1.2)
}
⼋、动画(animation)
1. 什么是动画
1. 动画是 CSS3 中最具颠覆性的特征之⼀，可通过设置多个节点来精确的控制⼀个或者⼀组动画，从⽽实现复杂的动画效果
2. 动画的基本使⽤
1. 先定义动画
2. 在调⽤定义好的动画
3. 语法格式(定义动画)
@keyframes 动画名称{
0%{
width: 100px;
}
100%{
width: 200px
}
}
4. 语法格式(使⽤动画)
div {
/* 调⽤动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
5. 动画序列
1. 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
2. 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
3. 动画是使元素从⼀个样式逐渐变化为另⼀个样式的效果，可以改变任意多的样式任意多的次数
4. ⽤百分⽐来规定变化发⽣的时间，或⽤ from 和 to，等同于 0% 和 100%
6. 代码演⽰
<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>
九、动画序列
代码演⽰
⼗、动画常见属性
1. 常见的属性
2. 代码演⽰
div{
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/
* 动画等待多长时间执⾏ */
animation-delay: 2s;
/* 规定动画播放次数 infinite: ⽆限循环 */
animation-iteration-count: infinite;
/* 是否逆⾏播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
div:hover{
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
⼗⼀、动画简写⽅式
1. 动画简写⽅式
/* animation: 动画名称持续时间运动曲线何时开始播放次数是否反⽅向起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode
2. 知识要点
简写属性⾥⾯不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和⿏标经过等其他配合使⽤
要想动画⾛回来，⽽不是直接调回来：animation-direction: alternate
盒⼦动画结束后，停在结束位置：animation-fill-mode: forwards
3. 代码演⽰
animation: move 2s linear 1s infinite alternate forwards;
⼗⼆、速度曲线细节
1. 速度曲线细节
1. animation-timing-function: 规定动画的速度曲线，默认是ease

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。