svg配合css3动画_使用SVG和CSS创建边框动画效果

svg配合css3动画

View demo 查看演示 Download Source 下载源

Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions. Please note that this technique is highly experimental.

今天，我们想探索一种非常微妙但有趣的边框动画效果，该效果可以在Car Philipe Brenner的创意网站上看到。 当您将鼠标悬停在网格中的白色投资组合项目之一上时，您会看到微妙的动画：网格项目变得透明，并且每侧的边界线都顺时针旋转，从而产生了非常不错的效果。 在这种情况下，效果是通过使用某些JS动画化多个跨度的宽度或高度来完成的。 我们将尝试使用SVG和CSS过渡的另一种方法。 请注意，该技术是高度实验性的。

Let’s take a look at the basic concept first, and then we’ll work towards the final effect.

首先让我们看一下基本概念，然后再努力达到最终效果。

Please note that we’ll be using CSS transitions on SVGs which might not be supported in all browsers.

请注意，我们将在并非所有浏览器都支持的SVG上使用CSS过渡。

When looking at the effect, it might not be immediately clear what’s going on, but when you look closely at only one border, let’s say, the top border, then you’ll notice that first, the white line’s width is decreasing from right to left and a new line moves in from the right with a bit of a delay, or gap. When adding all the other sides, it appears as if the top line moves around the corner down to the left side, the left side moves to the down side, and so on.

观察效果时，可能不会立即知道发生了什么，但是当您仅仔细观察一个边框(例如顶部边框)时，您会注意到，首先，白线的宽度从右到右逐渐减小向左移动，一条新线从右边移入，但有一点延迟或间隙。 当添加所有其他面时，似乎顶线在拐角处向下移动到左侧，而左侧则向下移动，依此类推。

You can surely create this effect without SVG, even without extra elements, just using pseudo-elements. But here we want to explore what we can do with SVG and how we can control it via CSS rather than using JavaScript.

仅使用伪元素，即使没有额外的元素，您也可以肯定地创建这种效果。 但是在这里，我们想探究如何使用SVG以及如何通过CSS而不是使用JavaScript来控制它。

Now, thinking about how to create this effect using SVG, we could animate the stroke-dashoffset of a rectangle’s stroke or draw the lines directly. We wanted to try a solution without using JS and after some fiddling, we figured that transitioning the stroke-dashoffset and the stroke-dasharray values in CSS can get quite buggy. So, we decided to try a different solution using lines and animating their translation. (We can imagine other approaches to this specific effect, but we liked the idea of moving lines because it is quite easy to understand and to do in CSS, and it also gives us some more opportunities for different animations as you can see in the demo.)

现在，考虑如何使用SVG来创建此效果，我们可以为矩形笔触的stroke-dashoffset设置动画或直接绘制线条。 我们想尝试一种不使用JS的解决方案，经过一番摆弄之后，我们发现在CSS中转换stroke-dashoffset和stroke-dasharray值可能会遇到很多麻烦。 因此，我们决定尝试使用线条来制作不同的解决方案，并对它们的翻译进行动画处理。 (我们可以想象有其他方法可以达到这种特定效果，但是我们喜欢移动线条的想法，因为它很容易理解和在CSS中完成，而且还为我们提供了更多的机会来制作不同的动画，如演示中所示。 )

The special thing about the lines that we’ll be using is that they will serve as three states of our animation. They will actually be three times as long as the size of the box they are contained by. In the middle, the line will have a gap the size of the box side. We will achieve this by setting the stroke-dashoffset value to the side length of the box. Now, the trick lies in transitioning the position of the line:

关于我们将要使用的线条的特殊之处在于它们将用作动画的三种状态。 实际上，它们的长度是它们所容纳的盒子的三倍。 在中间，该行将有一个与盒子侧面大小相同的间隙。 我们可以通过将stroke-dashoffset值设置为框的边长来实现。 现在，诀窍在于转换线的位置：

The SVG will have the size of the box, so we won’t see the overflowing part beyond the dashed line.

SVG将具有框的大小，因此我们不会在虚线之外看到溢出的部分。

Before we continue with the next three lines, let’s code this first step up. We’ll have a div with a SVG that has our line:

在继续接下来的三行之前，让我们对第一步进行编码。 我们将有一个带有SVG的div ，其内容如下：

The division has a width and height of 200px, just like the SVG drawing, and we’re setting the SVG to position absolute. The line has a stroke width of 10 and most importantly, a stroke-dasharray value of 200:

就像SVG绘图一样，该部分的宽度和高度为200px，我们将SVG设置为绝对位置。 该行的笔划宽度为10，最重要的是，笔划-破折号值为200：

div {
	width: 200px;
	height: 200px;
	position: relative;
	overflow: hidden;
	background: #ddd;
}

svg {
	position: absolute;
	top: 0;
	left: 0;
}

svg line {
	stroke-width: 10;
	stroke: #000;
	fill: none;
	stroke-dasharray: 200;
	-webkit-transition: -webkit-transform .6s ease-out;
	transition: transform .6s ease-out;
}

div:hover svg line {
	-webkit-transform: translateX(-400px);
	transform: translateX(-400px);
}

The line also has a transition and when we hover over the division, we want the line to move two thirds of its own length to the left, so we translate it -400px on the x-axis. You can take a look and play around with this first step in this JSBin example. Since we cannot use percentages for the translation values here, we need to set the translation in pixels.

该线还具有过渡效果，当我们将鼠标悬停在该分割线上时，我们希望该线向左移动其自身长度的三分之二，因此我们将其在x轴上平移-400px。 您可以在本JSBin示例中浏览并开始第一步。 由于此处无法使用百分比作为转换值，因此需要以像素为单位设置转换。

The next step is to add the other lines. In order to understand how we need to position and animate them, let’s have a look at this GIF:

下一步是添加其他行。 为了理解我们如何定位和设置它们的动画，让我们看一下这个GIF：

We want to animate each line in a way that when the first part of a line moves out of the box, the last part of the joining perpendicular line moves in. This will create the illusion that the lines move around the corners.

我们希望对每条线进行动画处理，以使当线的第一部分移出盒子时，连接的垂直线的最后部分向内移动。这会产生线绕角移动的错觉。

Let’s take a look at our coordinate system to define the line points correctly:

让我们看一下正确定义线点的坐标系：

The points for the left line are (0,200) and (0,-400), for the bottom one (200,200) and (-400,200), and for the right one (200,0) and (200,600):

左线的点是(0,200)和(0，-400)，底线的点是(200,200)和(-400,200)，右线的点是(200,0)和(200,600)：

For each line, we’ll need to set a different translation value on hover:

对于每一行，我们需要在悬停时设置不同的转换值：

div:hover svg line.top {
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
}

div:hover svg line.bottom {
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

div:hover svg line.left {
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}

div:hover svg line.right {
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px);
}

Check out the code in action.

查看实际的代码。

Now we got the main idea right, this is the effect we are after. Let’s make this look pretty

现在我们有了正确的主要思想，这就是我们所追求的效果。 让我们看起来很漂亮

Our box will be of a different size now (300 x 460) and we’ll also add some other text elements to the item:

我们的盒子现在将具有不同的大小(300 x 460)，我们还将在项目中添加一些其他文本元素：

	
	
D
	2012
	Broccoli, Asparagus, Curry

To recreate the effect as seen on Carl Philipe Brenner’s website, we’ll add some color transition to the box itself and add a little gap between the SVG border and the item using a box shadow:

为了重现卡尔·菲利普·布伦纳(Carl Philipe Brenner)网站上的效果，我们将为盒子本身添加一些颜色过渡，并使用盒子阴影在SVG边框和物品之间添加一些间隙：

.box {
	width: 300px;
	height: 460px;
	position: relative;
	background: rgba(255,255,255,1);
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	color: #2c3e50;
	box-shadow: inset 0 0 0 3px #2c3e50;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
}

.box:hover {
	background: rgba(255,255,255,0);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

Let’s also style the text elements:

让我们还设置文本元素的样式：

.box h3 {
	font-family: "Ruthie", cursive;
	font-size: 180px;
	line-height: 370px;
	margin: 0;
	font-weight: 400;
	width: 100%;
}

.box span {
	display: block;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 5px;
}

.box h3,
.box span {
	-webkit-transition: color 0.4s 0.5s;
	transition: color 0.4s 0.5s;
}

.box:hover h3,
.box:hover span {
	color: #fff;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

The SVG and line will be styled as before:

SVG和线条将像以前一样设置样式：

.box svg {
	position: absolute;
	top: 0;
	left: 0;
}

.box svg line {
	stroke-width: 3;
	stroke: #ecf0f1;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

We want a little delay for the line transition otherwise we don’t see it because of the background color transition of the box:

我们希望线转换有一点延迟，否则由于框的背景颜色转换而看不到它：

.box:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

Before we have defined the stroke-dasharray with only one value but now we want the “filled” parts and the gap to be of a different size so that the effect becomes exactly what we want:

在我们只用一个值定义stroke-dasharray之前，现在我们希望“填充”部分和间隙的大小不同，以便使效果完全符合我们的要求：

.box svg line.top,
.box svg line.bottom {
	stroke-dasharray: 330 240; 
}

.box svg line.left,
.box svg line.right {
	stroke-dasharray: 490 400;
}

If you play with these values, you’ll be able to see how the lines appear differently.

如果使用这些值，您将能够看到线条的不同显示方式。

And finally, we’ll set the respective values for the translations on hover. Since the width of our item is 300px, the horizontal lines will need to transition two thirds of the total width which is 900px. The same holds for the vertical lines:

最后，我们将在悬停时为翻译设置相应的值。 由于我们的商品的宽度为300像素，因此水平线将需要过渡总宽度(即900像素)的三分之二。 垂直线也是如此：

.box:hover svg line.top {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
}

.box:hover svg line.bottom {
	-webkit-transform: translateX(600px);
	transform: translateX(600px);
}

.box:hover svg line.left {
	-webkit-transform: translateY(920px);
	transform: translateY(920px);
}

.box:hover svg line.right {
	-webkit-transform: translateY(-920px);
	transform: translateY(-920px);
}

And that’s it! I hope you like this little effect and find it inspiring. Check out the alternatives to see what other possibilities there are with this technique.

就是这样！ 希望您喜欢这个小效果，并找到启发。 查看替代方法，以了解该技术还有哪些其他可能性。

翻译自: https://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/

svg配合css3动画