GIF效果图
在网上查阅相关资料后，发现目前的动态渐变色边框的实现方式大部分为使用伪元素设置宽高比内容区域大一些，设置渐变色背景后进行横向移动的方式实现，而没有渐变色边框围绕内容区域进行旋转的效果，于是我做了一个这样的demo供大家参考。
实现原理
首先将内容区域嵌套进一个DIV盒子中并设置overflow：hidden;。这个盒子的大小是内容区域的大小加上你希望实现的渐变边框的宽度，然后将内容区域居中，这样内容区域和父元素之间就有一个看似是边框的空白区域。
现在在这个空白区域加一个比父元素更大，背景为渐变色的盒子，将层级设置的比内容区域低z-index: -1;。再将这个渐变色背景的盒子加入旋转动画就完成了。
看起来颇为繁琐，实际结构却非常简单，只要脑海中能够有大概的立体感就能立刻明白这其中的原理。
为了让大家能更清晰地明白层级关系，我做了个一个3D效果的关系图，箭头越靠近指向的方向层级越高。最小实心方块是内容区域，最大的蓝色圆形是进行旋转的渐变色背景盒子，但是超出中间盒子大小的部分因为overflow：hidden;属性被隐藏掉了，而中间实心的内容区域的层级比后面圆形高，这样最终能够显示的正在旋转的渐变色背景只有内容区域和它们父元素之间的部分。
一图胜千言
HTML结构
<body>
<!-- 最外层仅起到限制渐变区域大小的作用 -->
<div 
最低0.47元/天 解锁文章
1612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
