CSS实现流动边框

今天药忘吃喽~ 2022-12-13 11:27 282阅读 0赞

## **【写在前面】** ##

咳咳，首先讲个题外话，原本我是做 C++/Qt 的，然而因为工作 ( 部分原因 ) 学起了前端。

当然，这也并不意味着我会丢掉 C++/Qt/Qml 这些 ( 会接着更新 )，只是额外增加一些前端相关的文章而已。

再者，也想着自己搭个网站 ( 或是博客 )，所以学学前端也是必然的。

--------------------

## **【正文开始】** ##

目前学到了 CSS动画 这部分，按照我的习惯，肯定是要实现些好玩的东西。

回想起王者里面很炫酷的头像框，大概这样：

![20201011123213377.gif][]

当然，王者这种用的是粒子特效，而我们只需仿一个效果即可。

那么，如何用 CSS 实现一个简易版呢。

开始，很容易想到的是四个 <div> 模拟四个方向的边框：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyODMyMjY_size_16_color_FFFFFF_t_70][]

想法很容易，结果实现起来相当复杂，直接 pass 掉。

然后搜了下相关的实现，结果都不是很满意 ( 都很复杂 )。

最终我还是找到一个类似的效果，思路很巧妙：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyODMyMjY_size_16_color_FFFFFF_t_70 1][]

沿着这个思路，联想到 CSS 中的标准盒模型，最后我实现的效果如下：

![20201011134645262.gif][]

其中头像图片如下( 上传到CSDN了 )：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyODMyMjY_size_16_color_FFFFFF_t_70 2][]

全部代码如下：

<!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>

代码简单易懂，不需要过多的解释，简单的动画，配上一些小技巧，我对最终的效果相当满意![20201011134258308.png][]。

--------------------

## **【结语】** ##

随着深入学习，越来越觉得前端是有相当有趣的( 也相当有难度 )，谁说前端简单啊喂！

[20201011123213377.gif]: /images/20221123/acf9496641f14b2f984a45465c029596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyODMyMjY_size_16_color_FFFFFF_t_70]: /images/20221123/6a6a673e46e042a19669b09c5000b908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyODMyMjY_size_16_color_FFFFFF_t_70 1]: /images/20221123/a6b2e31bf6e64b8facb43575b1760433.png
[20201011134645262.gif]: /images/20221123/1f0e7f54a21a495fb65a97cd2939681f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyODMyMjY_size_16_color_FFFFFF_t_70 2]: /images/20221123/04079ef063af4b97806fa1a141e06eaa.png
[20201011134258308.png]: /images/20221123/9d155ce1545e49838a701e6c1b3d28bd.png