css實現邊框動畫效果

最近寫了幾個頁面都用到css動畫，以及不少before,after僞類。在此記錄一下成果。
css邊框循環動畫，頁面效果以下：

一、沿着邊框動畫的圖形使用before，after僞類寫的。當時想用切圖來寫，後來考慮到優化，就用了css來寫。具體代碼以下：

---

<div class="div">

<i class="border-right-animate"></i>

</div>

i.border-right-animate{

display: block;
        height: 35px;
        width: 5px;
        background: #0b82ce;
        color: #0b82ce;
        position: absolute;
        top: 150px;
        right: -3px;  
        -webkit-animation: borderMove 6s linear infinite;
        -o-animation: borderMove 6s linear infinite;
        animation: borderMove 6s linear infinite;        
}

i.border-right-animate:before{

content: '';
    display: block;
    height: 40px;
    width: 7px;
    background: #0b82ce;
    color: #0b82ce;
    position: absolute;
    top: -40px;
    left: -1px;
}

i.border-right-animate:after{
    content: '';
    display: block;
    height: 20px;
    width: 2px;
    background: #0b82ce;
    color: #0b82ce;
    position: absolute;
    top: 30px;
    left: 1px;
}

---

仔細看沿着邊框動畫的圖形，是有三個長方形組成的。因此設計思路是，先寫出中間的那個長方形，即i標籤的樣式。再用before，after寫出兩邊的長方形。

動畫效果用的是css3的animation，我是在菜鳥教程網站上一邊看教程一邊作出的效果(http://www.runoob.com/css3/cs...;

我本身寫的keyframes以下:

keyframes borderMove {
0% {

right: -2px;
top: 40px;

}
25% {

right: -2px;
top: 25%;

}
50% {

right: -2px;
top: 50%;

}
75% {

right: -2px;
top: 75%;

}
100% {

top: calc(100% - 50px);
right: -2px;

}
}

@keyframes的做用是規定動畫的過程。個人設計思路就是剛開始圖形在右側邊框頂部，運行到一半時 圖形就沿着邊框移動到右側邊框的中間。如此循環。。

根據以上設計思路，就很容易寫出邊框的另外三個動畫效果了。