本教程将和大家一起来研究一种奇妙且有趣的边框运动效果。当你用鼠标划过类似图片的内容块时,它的边框将会很神奇的运动起来:内容块的透明度降低,它的四条边框按顺时针方向运动,效果十分奇妙。我们将使用html5 svg和CSS transitions来完成它。
开始之前先来思考一下,然后在去完成效果。
注意:不是所有的浏览器都支持在svg中使用CSS transitions。
我们刚接触这种效果时,并不知道该如何下手制作,但是你可以先观察一条边,比如上部的边,你会注意到,边框是从右到做减少,然后一条新的边再从右边出现运动到左边。当结合4条边来看时,效果是上部的边运动到左边,左边的边运动到下边,下边的边运动到右边,右边的边运动到上部,正好是一周。
你也许能在不使用svg的情况下制作这种效果,甚至不使用额外的元素,只使用伪元素。但是本教程里我们希望研究如何通过svg来制作,并且通过css而不是javascript来控制它。
现在,想一想如何通过svg来实现它。我们想不使用javascript来实现它,但是使用css来计算stroke-dashoffset和stroke-dasharray的值是相当困难的。所以我们决定使用另一种解决方案,使用线条并它们运动起来。
我们使用的线条有三个部分组成。线条的长度是方框的边长的三倍。线条的中间有一个和方框宽度相同的间隙,我们将通过设置stroke-dashoffset的值等于方框的宽度来实现效果。现在,诀窍在于过渡线的位置:
svg的大小设置为方框的大小,所以我们不会看到超出虚线溢出的部分。
我们使用一个div来放置svg
div的宽度和高度设置为和svg一样的200px,并且设置svg为绝对定位。这里重点要注意将线条的描边设置为10,并设置stroke-dasharray属性为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);
}
当我们用鼠标hoverdiv的时候,线条也要有一些transition效果。我们希望线移动其自身长度三分之二左右,所以在x轴上设置translate为-400px,由于我们在这里不能够设置translation的值为百分比,所以只能使用像素做单位。
下面我们来添加另外几条线,为了便于理解他们的位置和运动方向,来看下面的图片演示。
我们希望线条这样运动,当线条的开始部分移出方框时,和他相垂直的线的后面部分开始进入方框,这样就会制造出一种四条线沿着边框运动的视觉差效果。
让我们来看一看线条运动的坐标系。
左边的线条的坐标为(0,200)和(0,-400),下边的线条为(200,200)和(-400,200),右边的线条为(200,0)和(200,600):
当鼠标hover的时候,需要为每条线设置不同的translation
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);
}
现在我们做出了一个基本的效果,让我们来做得更加漂亮一点!
我们可以再方框盒中添加一些文本
D
Broccoli, Asparagus, Curry
再为方框添加一些颜色渐变,各条svg边框间使用box shadow来制作一些间隔。
.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;
}
为文本添加一些样式
.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;
}
给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;
}
因为方框的背景色在做渐变,所以我们要为线条的transition设置一些延时,否则看不到效果。
.box:hover svg line {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
前面我们设置的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;
}
最后,我们设置当鼠标划过时不同的转换值。由于我们的方框是300px宽度,水平线将需要的总宽度的三分之二作为过渡。垂直方向的线也是相同的原理。
.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);
}
教程就到这里,希望对你有所帮助!