H5C3-day02-小结
作者:互联网
H5C3-day02-小结
01-2D转换之rotate
-
旋转
- rotate(度数)
- 单位:deg
- 正顺,负逆
- 默认的旋转中心点为元素的正中间
-
CSS3 三角
- 用rotate属性+border属性实现
02-2D转换之中心点
- transform-origin:(x y);
- x为横坐标
- y为纵坐标
- 可以填方位名词,百分号,px
- 默认为50% 50%
- 只写一个值时,第二值为默认值50%
03-2D转换之scale
- 缩放
- scale(x,y)
- x为宽
- y为高
- 放大:大于1
- 缩小:小于1
- 只写一个值时,第二个值和第一个值相同
04-2D转换综合写法以及顺序
- transform:translaste rotate scale;
- 一般把移动放在第一
- 用空格隔开
05-CSS3动画的使用
-
1.定义动画
@keyframes name { 0%{ } 100%{ } }
-
2.调用动画
/*动画名称*/ animation-name: /*持续时间*/ animation-duration:
06-动画序列
-
0%是动画开始,100%是动画完成,0-100的规则即为动画序列
-
from 和 to 等价于 0% 和 100%;
-
到达当前序列状态的时间 = 动画总持续时间 x 这个序列状态的百分比
07-CSS3动画常用属性
属性 | 方法 | 描述 |
---|---|---|
@keyframes | 必填 | 定义动画 |
animation | 动画简写属性,除了play-state属性 | 动画简写 |
name | 必填 | 名称 |
duration | 必填 | 持续时间 |
timing-function | linear: 匀速 ease: 慢-快-慢 默认值 ease-in: 慢-快 ease-out: 快-慢 ease-in-out: 慢-快-慢 steps:步长 |
运动曲线 |
delay | 延迟时间 s 或 ms | 延长时间 |
iteration-count | infinite:无限 | 循环次数 |
direction | normal默认值 altemate返回 |
方向 |
fill-mode | backwords:停留在0% forwords:停留在100% |
结束状态 |
play-state | running:播放 paused:暂停 |
鼠标移动时的状态 |
07-CSS3动画综合写法
animation: name duration timing-function delay iteration-count direction fill-mode;
08-运动曲线之steps步长
-
stepss(步数,start/end)
-
按步数分开动画,每一步的到达时间 = 总持续时间 / 步数
09-奔跑的熊大案例
标签:动画,rotate,name,day02,ease,2D,0%,H5C3,小结 来源: https://blog.csdn.net/weixin_45555964/article/details/100586890