上一篇講過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>

CSS動畫實例