CSS动画实例

上一篇讲过css动画transform transition的语法，这一节展示自己做的几个小例子加深印象

1. 线条动画效果

代码：最外层div包含2个小的div : a和b.   a有左右边框(高度变化)， b有上下边框（宽度变化）, 默认不显示，鼠标移上去时，a的高度和b的宽度发生变化，交叉效果

<style>
*{margin:0;padding:0;}
.main{ width: 300px; height: 300px; background: #333; position: relative; }
.a,.b{
    opacity: 0; position: absolute;
    top: 0;bottom: 0;left: 0;right: 0; margin: auto;  //水平垂直居中
    transition: all .3s;  //动画持续事件0.3s
}
.a{
    width: 200px; height:100px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
.b{
    width: 100px; height: 200px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.main:hover .a{ opacity: 1; height: 230px; }
.main:hover .b{ width: 230px; opacity: 1;  }
</style>

<div class="main">
    <div class="a"></div>
    <div class="b"></div>
</div>

2. 旋转：

代码：核心部分是  transform-origin: 0 0; 必须设置到起始点，然后逆时针旋转

<style>
*{margin:0;padding:0;}
.a1{
    position: relative;width: 200px;height: 200px;overflow: hidden;background: #000;}
.a2{
    position: absolute;top: 200px;width: 300px;height: 200px;
    background: #2487e0;transition: all .3s;transform-origin: 0 0; }
.a1:hover .a2 {
    transform: rotate(-15deg);
}
</style>


<div class="a1">
    <div class="a2">
    </div>
</div>