CSS3知识回顾(9)
CSS32d,旋转等
CSS3 2D转换
translate
- translate 移动,
transform:translate(x,y)
- translateX/Y 右/下移动
- translate不会影响其他的元素
- 如果里面的参数是
%
移动的而距离是盒子的宽度
或者自身元素
的%
- translate对
行内元素
是无效的
rotate
- rotate(ndeg),旋转
- 三角案例也可以试用
transform-origin
- 转变的起点
transform-origin:x y
xy 50%时为中心点- 可以使用方位名词
居中代码
1 | top:50%; |
scale(x,y)
- 元素的缩放(数字不跟单位)
- 可以分别缩放,可以等比缩放,缩小
<
1 - 优势不会影响其他的盒子,可以设置转化的中心点
2D综合写法
- 综合编写的时候,顺序有要求
- 同时有位移和旋转的,最好先写位移
动画
- 定义动画
@keyframes
- 调用动画
animation-name
- 调用时间
animation-duration
动画序列
from
和to
等价于0%
和100%
- keyframe里面的百分比必须是整数
- 百分比按照时间来划分
动画属性
animation-name
动画名称animation-duration
动画时间animation-delay
动画开始时间延迟animation-iteration-count
重复次数,infinite无限次,默认为1animation-direction
alternate 逆播放animation-play-state
规定动画运行状态,running,和paused,可以搭配hover使用animation-fill-mode
规定动画结束后的状态,保持forwards回到起始backwarksanimation-timing-funtion
规定动画的速度曲线,默认·ease·linear
匀速
- 简写:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
速度曲线细节
linear
匀速ease
默认,从低速开始加快结束变慢ease-in
动画以低速开始ease-out
以低速结束ease-in-out
综合step()
分步进行
小熊案例
- 使用了动画效果animation
- 使用精灵图,用step来定义熊的移动
查看代码
1 | .bear-bg{ |
查看演示图例
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论