我正在尝试找出一种方法,使按钮在被绘制时呈现动画效果。
到目前为止,最接近的代码片段是这个,但是在设置了border-radius时它并不完美(请注意角落)。
参考链接:https://codepen.io/anon/pen/MbWagQ
到目前为止,最接近的代码片段是这个,但是在设置了border-radius时它并不完美(请注意角落)。
参考链接:https://codepen.io/anon/pen/MbWagQ
<button class="draw">draw</button>
//Colors
$cyan: #60daaa;
$red: #f45e61;
// Basic styles
button {
background: none;
border: 0;
box-sizing: border-box;
color: $red;
font-size: inherit;
font-weight: 700;
padding: 1em 2em;
text-align: center;
margin: 20px;
// Required, since we're setting absolute on pseudo-elements
position: relative;
vertical-align: middle;
&::before,
&::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
}
.draw {
transition: color 0.25s;
border-radius: 7px;
&::before,
&::after {
border-radius: 7px;
border: 3px solid transparent; // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
width: 0;
height: 0;
}
// This covers the top & right borders (expands right, then down)
&::before {
top: 0;
left: 0;
}
// And this the bottom & left borders (expands left, then up)
&::after {
bottom: 0;
right: 0;
}
&:hover {
color: $cyan;
}
// Hover styles
&:hover::before,
&:hover::after {
width: 100%;
height: 100%;
}
&:hover::before {
border-top-color: $cyan; // Make borders visible
border-right-color: $cyan;
transition:
width 0.25s ease-out, // Width expands first
height 0.25s ease-out 0.25s; // And then height
}
&:hover::after {
border-bottom-color: $cyan; // Make borders visible
border-left-color: $cyan;
transition:
border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
width 0.25s ease-out 0.5s, // And then exanding width
height 0.25s ease-out 0.75s; // And finally height
}
}
我想避免使用svg文件,最好用纯html和css来实现,但是javascript也可以。