CSS32d,旋转等

CSS3 2D转换

translate

  1. translate 移动,transform:translate(x,y)
  2. translateX/Y 右/下移动
  3. translate不会影响其他的元素
  4. 如果里面的参数是%移动的而距离是盒子的宽度或者自身元素%
  5. translate对行内元素是无效的

rotate

  1. rotate(ndeg),旋转
  2. 三角案例也可以试用

transform-origin

  1. 转变的起点
  2. transform-origin:x y xy 50%时为中心点
  3. 可以使用方位名词

居中代码

1
2
3
top:50%;
left:50%
transform:translate(-50%,-50%)

scale(x,y)

  1. 元素的缩放(数字不跟单位)
  2. 可以分别缩放,可以等比缩放,缩小<1
  3. 优势不会影响其他的盒子,可以设置转化的中心点

2D综合写法

  1. 综合编写的时候,顺序有要求
  2. 同时有位移和旋转的,最好先写位移

动画

  1. 定义动画@keyframes
  2. 调用动画animation-name
  3. 调用时间animation-duration

动画序列

  1. fromto等价于0%100%
  2. keyframe里面的百分比必须是整数
  3. 百分比按照时间来划分

动画属性

  1. animation-name动画名称
  2. animation-duration动画时间
  3. animation-delay动画开始时间延迟
  4. animation-iteration-count重复次数,infinite无限次,默认为1
  5. animation-direction alternate 逆播放
  6. animation-play-state规定动画运行状态,running,和paused,可以搭配hover使用
  7. animation-fill-mode规定动画结束后的状态,保持forwards回到起始backwarks
  8. animation-timing-funtion规定动画的速度曲线,默认·ease· linear匀速
  • 简写:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

速度曲线细节

  1. linear匀速
  2. ease默认,从低速开始加快结束变慢
  3. ease-in动画以低速开始
  4. ease-out 以低速结束
  5. ease-in-out综合
  6. step()分步进行

小熊案例

  1. 使用了动画效果animation
  2. 使用精灵图,用step来定义熊的移动

查看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.bear-bg{
position: relative;
margin:500px auto;
width: 100%;
height: 100px;
background-color: #9ea5a7;
}
.bear-bg .bear{
position: absolute;
width: 200px;
height: 100px;
background: url(bear.png) no-repeat;
background-color: #9ea5a7;
animation: bear .6s steps(8) infinite,bear-move 2s forwards;
}
@keyframes bear{
0%{
}
100%{
background-position: -1600px 0;
}
}
@keyframes bear-move{
0%{
left: 0%;
}
100%{
left: 50%;
transform: translate(-50%);
/* margin-left: -100px; */
}
}

查看演示图例