CSS實現流動邊框

夢起丶發表於2020-10-11
CSS

【寫在前面】

咳咳，首先講個題外話，原本我是做 C++/Qt 的，然而因為工作 ( 部分原因 ) 學起了前端。

當然，這也並不意味著我會丟掉 C++/Qt/Qml 這些 ( 會接著更新 )，只是額外增加一些前端相關的文章而已。

再者，也想著自己搭個網站 ( 或是部落格 )，所以學學前端也是必然的。

【正文開始】

目前學到了 CSS動畫 這部分，按照我的習慣，肯定是要實現些好玩的東西。

回想起王者裡面很炫酷的頭像框，大概這樣：

當然，王者這種用的是粒子特效，而我們只需仿一個效果即可。

那麼，如何用 CSS 實現一個簡易版呢。

開始，很容易想到的是四個 <div> 模擬四個方向的邊框：

想法很容易，結果實現起來相當複雜，直接 pass 掉。

然後搜了下相關的實現，結果都不是很滿意 ( 都很複雜 )。

最終我還是找到一個類似的效果，思路很巧妙：

沿著這個思路，聯想到 CSS 中的標準盒模型，最後我實現的效果如下：

其中頭像圖片如下( 上傳到CSDN了 )： 

全部程式碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 100px auto;
            overflow: hidden;
            border-radius: 4px;
        }
        @keyframes rotate {
            to {
                transform: rotate(1turn);
            }
        }
        .under {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid yellow;
            border-right: 200px solid green;
            border-bottom: 200px solid red;
            border-left: 200px solid blueviolet;
            left: -125px;
            top: -125px;
            animation: rotate 2s linear infinite;
        }
        .box > span {
            position: absolute;
            top: 0px;
            margin: 8px;
            width: 134px;
            height: 134px;
            border-radius: 4px;
            background-size: cover;
            background-image: url(https://img-blog.csdnimg.cn/20201011132854978.jpg);
            background-color: white;
        }
        @keyframes rotate2 {
            to {
                transform: rotate(-1turn);
            }
        }
        .box .under2 {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid rgb(0, 255, 13);
            border-right: 200px solid rgb(45, 218, 203);
            border-bottom: 200px solid rgb(255, 106, 156);
            border-left: 200px solid rgb(251, 255, 26);
            left: -125px;
            top: -125px;
            animation: rotate2 2s linear infinite;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="under"></div>
        <span></span>
    </div>
    <div class="box">
        <div class="under2"></div>
        <span></span>
    </div>
</body>

</html>

程式碼簡單易懂，不需要過多的解釋，簡單的動畫，配上一些小技巧，我對最終的效果相當滿意。

【結語】

隨著深入學習，越來越覺得前端是有相當有趣的( 也相當有難度 )，誰說前端簡單啊喂！

相關文章