svg实现的一个微不足道的描边效果:
线条是运动着的,以下是png,本应放gif来着
颜色看起来有点乱,哈哈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>流光</title>
<style>
.text{
fill:#eee;
font-size: 80px;
}
.text1{
stroke: #f00;
animation: slide1 5s linear infinite;
}
@keyframes slide1{0%{stroke-dashoffset: -0;}
100% {stroke-dashoffset: 125;}}
.text2{
stroke: #f33;
animation: slide2 5s linear infinite;
}
@keyframes slide2{0%{stroke-dashoffset: -35;}
100% {stroke-dashoffset: 160;}}
.text3{
stroke: #f66;
animation: slide3 5s linear infinite;
}
@keyframes slide3{0%{stroke-dashoffset: -70;}
100% {stroke-dashoffset: 195;}}
.text4{
stroke: #faa;
animation: slide4 5s linear infinite;
}
@keyframes slide4{0%{stroke-dashoffset: -105;}
100% {stroke-dashoffset: 230;}}
</style>
</head>
<body>
<div class="svg_wrap">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600px;height: 300px;">
<text class="text text1" x="50" y="100"
stroke-dasharray="35 135" >细草微风岸,平林月未满</text>
<text class="text text2" x="50" y="100"
stroke-dasharray="35 135" >细草微风岸,平林月未满</text>
<text class="text text3" x="50" y="100"
stroke-dasharray="35 135" >细草微风岸,平林月未满</text>
<text class="text text4" x="50" y="100"
stroke-dasharray="35 135" >细草微风岸,平林月未满</text>
</svg>
</div>
</body>
</html>