目录
2D转换与动画
一、2D 转换之 translate
1. 2D 转换
- 2D 转换是改变标签在?维平?上的位置和形状
- 移动： translate
- 旋转： rotate
- 缩放： scale
2. translate 语法
-
x 就是 x 轴上?平移动
-
y 就是 y 轴上?平移动
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
3.重点知识点
- 2D 的移动主要是指 ?平、垂直?向上的移动
- translate 最?的优点就是不影响其他元素的位置
- translate 中的100%单位，是相对于本身的宽度和?度来进?计算的
- ?内标签没有效果
4.代码演示
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* ?平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* ?平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* ?平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px) }
二、2D 转换 rotate
1.rotate 旋转
- 2D 旋转指的是让元素在?维平?内顺时针或者逆时针旋转
2.rotate 语法
/* 单位是：deg */
transform: rotate(度数)
3.重点知识点
- rotate ??跟度数，单位是 deg
- ?度为正时，顺时针，?度为负时，逆时针
- 默认旋转的中?点是元素的中?点
4.代码演示
img:hover {
transform: rotate(360deg) }
三、设置元素旋转中?点(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.?来控制元素的放?与缩?
2.语法
transform: scale(x, y)
3.知识要点
- 注意，x 与 y 之间使?逗号进?分隔
- **transform: scale(1, 1): **宽?都放??倍，相当于没有放?
- **transform: scale(2, 2): **宽和?都放?了?倍
- **transform: scale(2): **如果只写了?个参数，第?个参数就和第?个参数?致
- **transform:scale(0.5, 0.5): **缩?
- **scale **最?的优势：可以设置转换中?点缩放，默认以中?点缩放，?且不影响其他盒?
五、2D 转换综合写法以及顺序问题
1.知识要点
- 同时使?多个转换，其格式为 transform: translate() rotate() scale()
- 顺序会影响到转换的效果(先旋转会改变坐标轴?向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前?
2.代码演示
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2) }
六、动画(animation)
1.什么是动画
-
动画是 CSS3 中最具颠覆性的特征之?，可通过设置多个节点来精确的控制?个或者?组动画， 从?实现复杂的动画效果
2.动画的基本使?
- 先定义动画
- 在调?定义好的动画
3.语法格式(定义动画)
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
4.语法格式(使?动画)
div {
/* 调?动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间； }
5.动画序列
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从?个样式逐渐变化为另?个样式的效果，可以改变任意多的样式任意多的次数
- ?百分?来规定变化发?的时间，或? 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: aternate
- 盒?动画结束后，停在结束位置：animation-fill-mode: forwards
3.代码演示
animation: move 2s linear 1s infinite alternate forwards;
九、速度曲线细节
1.速度曲线细节
- animation-timing-function: 规定动画的速度曲线，默认是ease
?
2.代码演示
十、div {
width: 0px;
height: 50px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
background-color: aquamarine;
animation: move 4s steps(24) forwards;
}
@keyframes move {
0% {
width: 0px;
}
100% {
width: 480px;
}
}