When the mouse through the mesh elements, there will be a subtle animations occur - mesh elements become transparent, each side in a clockwise animation, creating very good results. This effect is achieved by JS for wide span tag or high do animation. We will get to use SVG and CSS gradients to complete. Note that this technology is still experimental.
First, let's look at the basic concepts, then we will be moving in this direction.
Please note that we will use CSS in SVG transition may not be supported by all browsers.
At first glance you may not understand how this effect is accomplished. We take a close look at the top edge will find that the width of the white side continues to extend from the right to the left, and a slightly delayed side followed by moving together. Each side has such an approach. Looks like the top edge of the corner, moving to the left, and so on.
SVG can be completed without such an effect, even with only pseudo-elements. But we want to explore how to use CSS rather than JavaScript to control SVG.
Now, to think about how to create such an effect. We can change the rectangle troke-dashoffset or directly draw lines. We try to do the JavaScript solutions. We found, CSS transition values stroke-dashoffset and stroke-dasharray will trigger a lot of BUG. So we have to try different solutions, the use of lines and animate them, it is very easy to understand and implement in CSS. This also gives us more opportunity to explore different animation effects.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
We will use special line is that they are in the animation will have three states. They are three times the side length of square box, wherein the intermediate length of equal length sides is a gap. We will be achieved by setting the value of the stroke-dashoffset square box with a side of equal length. Now, the key is to achieve this animation conversion line location of:
SVG is consistent with the box-size, you will not see beyond the dotted line part.
Let's complete the first line:
CSS Code copied to the clipboard
- <div>
- <svg width="200" height="200">
- <line x1="0" y1="0" x2="600" y2="0" />
- </svg>
- </div>
The length and width div 20px, and SVG same. The SVG position to absolute, a line width of 10, stroke-dasharray 200.
CSS Code copied to the clipboard
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);
}
When the number of mouse over div, line also has a transition. We want the line to move to two-thirds of it, so the x-axis is moved to -400px place, you can look at this effect. Because the translation unit can not be here to do a percentage, so use px.
Then add the remaining three lines, gif effects:
We need to achieve the following effects: the first portion of the wire after removal boxes, moving the last part of the next incoming line which will pass into the illusion ,, straight turning the corner,
To look at the definition of the coordinate system:
左边的线的坐标是(0,200) 到 (0,-400)，底部的是(200,200) 到 (-400,200)，右边的是right one (200,0) 到 (200,600)：
给每条线加上不同的hover效果：
CSS Code复制内容到剪贴板
div:hover svg line.top {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
div:hover svg line.bottombottom {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
div:hover svg line.left {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
div:hover svg line.rightright {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
看看现在的效果。
现在方盒大小改为300 x 460，再给它添加一些内容：
CSS Code复制内容到剪贴板
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
D
2012
Broccoli, Asparagus, Curry
为了实现Carl Philipe Brenner的网站上的效果，我们还要添加颜色过渡效果、盒子阴影等：
CSS Code复制内容到剪贴板
.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;
}
给文字加上样式：
CSS Code复制内容到剪贴板
.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和线条添加样式：
CSS Code复制内容到剪贴板
.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;
}
给线的过渡加上延时：
CSS Code复制内容到剪贴板
.box:hover svg line {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
之前我们定义的stroke-dasharray只有一个值，但是现在要因尺寸变化而修改
CSS Code复制内容到剪贴板
.box svg line.top,
.box svg line.bottombottom {
stroke-dasharray: 330 240;
}
.box svg line.left,
.box svg line.rightright {
stroke-dasharray: 490 400;
}
如果你尝试这些值，你就能看到这些线条不同的显示效果。
最后，我们要个hover过渡设置相应的值。因为现在元素是300px宽，所以水平线条改为900px，竖线同理改变:
CSS Code复制内容到剪贴板
.box:hover svg line.top {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
.box:hover svg line.bottombottom {
-webkit-transform: translateX(600px);
transform: translateX(600px);
}
.box:hover svg line.left {
-webkit-transform: translateY(920px);
transform: translateY(920px);
}
.box:hover svg line.rightright {
-webkit-transform: translateY(-920px);
transform: translateY(-920px);
}
It's done. We hope that through these effects stimulate your creativity, achieve more results
