CSS知识回顾（9）

来源博客：u.mr90.top

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. 可以使用方位名词

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来定义熊的移动

.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; */
    }
}