SVG Stroke Animation With CSS | SVG Text (Desktop)
Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng SVG Stroke Animation đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.
<svg id="text-effect">
<symbol id="text">
<text text-anchor="middle" x="50%" y="70%">SVG Text</text>
</symbol>
<use xlink:href="#text"></use>
</svg>
#text-effect {
font-weight: bold;
width: 100%;
height: 350px;
text-transform: uppercase;
text {
font-size: 200px;
fill:rgba(0,0,0,.1);
stroke-width:1px;
stroke: #fff;
stroke-linejoin: round;
stroke-dasharray: 80;
-webkit-animation: anmation 1s linear infinite;
animation: anmation 1s linear infinite;
}
}
@-webkit-keyframes anmation {
100% {
stroke-dashoffset:160;
}
}
@keyframes anmation {
100% {
stroke-dashoffset:160;
}
}