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. from和to等价于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; */
    }
}

查看演示图例