运用SVG和CSS3来完成1个酷炫的边框动漫

    演试 | 免费下载

今日大家来探寻1下Carl Philipe Brenner的网站上1个彼此之间而趣味的动漫实际效果。当电脑鼠标历经网格元素时，会有1个彼此之间的动漫产生——网格元素变得全透明，每条边有个顺时针的动漫，造就了十分好的实际效果。这类实际效果是根据JS给span标识的宽或高做了动漫。大家待会会用SVG和CSS渐变色来进行。留意，这个技术性還是试验性的。

最先，让大家看来看基础的定义，随后大家会朝着这个方位勤奋。

请留意，大家将在SVG上应用CSS过渡，将会没法获得全部访问器的适用。

乍眼1看将会不搞清楚这个实际效果是如何进行的。大家先细心看看上面的边就会发现，白色的边的宽度持续从右侧往左侧拓宽，而1条略微延时的边紧跟随1起挪动。每条边都有这样的做法。看起来就像上面的边历经拐角挪动到了左侧，并以此类推。

无需SVG也能进行这样的实际效果，乃至只用伪元素。可是大家想探寻1下如何用CSS而并不是JavaScript来操纵SVG。

如今，来思索1下要如何建立出这样的实际效果。大家能够更改矩形框的troke-dashoffset或立即画线。大家尝试无需JavaScript的处理计划方案。大家发现，CSS过渡stroke-dashoffset 和 stroke-dasharray的值会开启许多BUG。因此大家要尝试不一样的处理计划方案，运用线条和它们的动漫，这在CSS里很非常容易了解和完成。这也给大家更多机遇去探寻不一样的动漫实际效果。

大家即将应用的线的非常的地方是，它们在这个动漫里将有3种情况。它们是方盒边长的3倍，在其中正中间1截是与边等长的空隙。大家将根据设定stroke-dashoffset的值来完成与方盒的边等长。如今，这个动漫完成的重要在于线的部位变换：

SVG与方盒尺寸1致，就不容易看到超过虚线的一部分。

大家先进行第1条线：

这个div长宽20px，和SVG1样。把SVG部位设为absolute，线宽度为10，stroke-dasharray为200。

当数电脑鼠标飘浮在div上时，线也是有1个过渡。大家要把线挪动到它的3分之2处，因此要在x轴上挪动到⑷00px处，你能够看看这个实际效果。由于translation不可以在这里用百分比做企业，因此用px。

接着加上其余3条线，gif实际效果：

大家必须完成下列实际效果：线的第1一部分移出方盒后，周围的线的最终1一部分挪动进来，，这将传进平行线在转角处拐弯的假象，

看来看座标系的界定：

左侧的线的座标是(0,200) 到 (0,⑷00)，底部的是(200,200) 到 (⑷00,200)，右侧的是right one (200,0) 到 (200,600)：

给每条线再加不一样的hover实际效果：

看看如今的实际效果。

如今方盒尺寸改成300 x 460，再给它加上1些內容：

以便完成Carl Philipe Brenner的网站上的实际效果，大家还要加上色调过渡实际效果、盒子黑影等：

给文本再加款式：

给SVG和线条加上款式：

给线的过渡再加延时：

以前大家界定的stroke-dasharray仅有1个值，可是如今要因规格转变而改动

假如你尝试这些值，你就可以看到这些线条不一样的显示信息实际效果。

最终，大家要个hover过渡设定相应的值。由于如今元素是300px宽，因此水平线条改成900px，竖线同理更改:

大获全胜。期待能根据这些实际效果激起你的艺术创意，完成更多的实际效果~