CSS实现流动边框

【写在前面】

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

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

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


【正文开始】

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

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

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

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

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

 模拟四个方向的边框:

CSS实现流动边框_第1张图片

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

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

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

CSS实现流动边框_第2张图片

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

CSS实现流动边框_第3张图片

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

CSS实现流动边框_第4张图片

全部代码如下:





    
    
    Document
    



    

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


【结语】

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

你可能感兴趣的