svg文字hover动画

用Svg搭配CSS3创建简单的线条动画。

html代码:

<hgroup class="svg-border-animation">
<svg viewBox="0 0 320 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320"></rect>
</svg>
<div class="hover-text">HOVER ME</div>
</hgroup>

对应样式:

.svg-border-animation {
position: absolute;
width: 320px;
height: 60px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .5s;
}
.hover-text {
position: absolute;
line-height: 60px;
width: 320px;
top: 0;
color: #333;
font-size: 28px;
text-align: center;
cursor: pointer;
}
.shape {
fill: transparent;
stroke-width: 4px;
stroke: #333;
stroke-dasharray: 160 520;
stroke-dashoffset: -460;
}
.svg-border-animation:hover .hover-text {
transition: 0.5s;
color: #3F51B5;
}
.svg-border-animation:hover .shape {
-webkit-animation: draw 0.5s linear forwards;
animation: draw 0.5s linear forwards;
}
@keyframes draw {
0% {
stroke-dasharray: 160 520;
stroke-dashoffset: -460;
stroke-width: 4px;
}
100% {
stroke-dasharray: 760;
stroke-dashoffset: 0;
stroke-width: 2px;
stroke: #3F51B5;
}
}
NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/html/svg-animation/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!