CSS实现流动边框

【写在前面】

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

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

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

---

【正文开始】

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

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

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

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

开始，很容易想到的是四个

 模拟四个方向的边框：

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

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

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

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

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

全部代码如下：

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

---

【结语】

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