第二天:css3-2D转换
01-2D转换–旋转rotate
-
2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转
-
语法
transfrom:rotate(度数)
-
重点
- rotate里面跟度数,单位是deg
- 角度为正数时顺时针旋转,负数时逆时针旋转
- 默认的旋转点为元素中心
02-2D转换–旋转中心点设置 transfrom-origin
-
设置元素旋转的中心点
-
语法
transfrom-origin: x y;
-
重点
- 主要后面的参数x和 y用空格隔开
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 可以给x y 设置 像素、百分比 或者方位名词(top botton left right center)
03-2D转换–缩放 scale
-
缩放,顾名思义,可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小
-
语法
transform:scale(宽的倍数,高的倍数);
transform:scale(倍数);
-
重点
- 图片的缩放不影响其他元素的位置
- 倍数大于1是放大,倍数小于1且小于-1是缩小
- 如果倍数为负数为反向放大,很少用负数容易让人产生误解
04-动画animation
/* 1 声明动画函数 */
@keyframes ani_div {
0%{
width: 100px;
background-color: red;
}
50%{
width: 150px;
background-color: green;
}
100%{
width: 300px;
height: 300px;
background-color: yellow;
}
}
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 2 调用动画 */
animation-name: ani_div;
/* 持续时间 */
animation-duration: 2s;
}
-
动画名
设置要使用的动画名
animation-name:xxx;
-
持续时间
设置动画播放的持续时间
animation-duration:3s
-
速度曲线
和设置过渡的速度曲线一样
animation-timing-function:linear;
- linear: 匀速
- ease: 慢-快-慢 默认值
- ease-in: 慢-快。
- ease-out: 快-慢。
- ease-in-out: 慢-快-慢。
- steps: 步长
-
延迟时间
animation-delay: 0s;
-
循环次数
设置动画播放的循环次数
animation-iteration-count: 2;
infinite 为无限循环 -
循环方向
animation-direction
如在动画中定义了 0%:红色 100%:黑色 那么 当属性值为
- normal 默认值 红 -> 黑
- reverse 反向运行 黑 -> 红
- alternate 正-反-正… 红 -> 黑 -> 红…
- alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
- 以上与循环次数有关
-
动画等待或者结束的状态
animation-fill-mode
设置动画在等待或者结束的时候的状态- forwards:动画结束后,元素样式停留在 100% 的样式
- backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式
- both: 同时设置了 forwards和backwards两个属性值
-
暂停和播放
animation-play-state
控制 播放 还是 暂停running
播放paused
暂停
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: name duration timing-function delay iteration-count direction fill-mode,
animation: name duration timing-function delay iteration-count direction fill-mode;