CSS3邊框旋轉動畫實現效果

codingNoob發表於2017-12-12
CSSS3動畫

動畫結果如下：

這裡寫圖片描述

以前有看到過相應的動畫，想了一下實現思路，就是用4個div分別定位模擬上下左右邊框，然後根據定位top、left、right、bottom4個位置定位，再用css3中的transition實現相應的滑鼠移入動畫效果。

這裡寫圖片描述

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>動畫邊框效果</title>
    <style>
        *{margin:0;padding:0;}
        .box{position:relative;height:200px;width:200px;padding:10px;margin:100px auto;background:#eee;overflow: hidden;/*設定overflow因此隱藏掉4個模擬邊框，滑鼠移入後再顯示出來*/}
        .box .item{height:100%;color:#fff;font-size:30px;line-height:200px;text-align:center;background:#ccc;}
        .box .top,.box .bottom{height:10px;width:220px;background:rgb(18, 233, 54);}
        .box .left,.box .right{height:220px;width:10px;background:rgb(18, 233, 54);}

        .box .top{position:absolute;top:0;left:-220px;transition:all 1s ease;/*必須要有，不然數百移出來的時候就不會有動畫返回效果*/}
        .box .left{position:absolute;bottom:-220px;left:0px;transition:all 1s ease;}
        .box .right{position:absolute;top:-220px;right:0px;transition:all 1s ease;}
        .box .bottom{position:absolute;bottom:0;right:-220px;transition:all 1s ease;}

        .box:hover .top{left:10px;transition:all .7s ease;}
        .box:hover .left{bottom:10px;transition:all .7s ease;}
        .box:hover .right{top:10px;transition:all .7s ease;}
        .box:hover .bottom{right:10px;transition:all .7s ease;}

    </style>
</head>
<body>
    <div class="box">
       <div class="item">內容</div>
       <div class="top"></div>
       <div class="right"></div>
       <div class="bottom"></div>
       <div class="left"></div>
    </div>
</body>
</html>

由於本人水平有限，暫時想到這樣的方法，個人感覺這方法不是很好，應該會有更好的方法去實現，如果哪位有更好的實現方法，望大神不吝賜教，小弟不勝感激。

相關文章