svg实现文字笔画流动效果
作者:互联网
背景:
前段时间着手某一项目时UI提出实现文字笔画流动效果的需求,故在github和gitee上寻找灵感,最后从一位学长的项目中找到了实现方法,感觉收获颇多,特此记录。
解决方案:
搭建svg基本的html结构:
<div class="container">
<svg viewBox="0 0 1000 300">
<symbol id="line-text"> <!--symbol用来创建模板,通过use实例化-->
<text text-anchor="middle" x="50%" y="50%">ABCDEFG</text>
<!--x和y指定锚点位置,text-anchor确定文本相对于锚点的对齐位置-->
</symbol>
<!--以下四个use对应了每个文字中对应的四段虚线-->
<use href="#line-text" class="text"></use>
<use href="#line-text" class="text"></use>
<use href="#line-text" class="text"></use>
<use href="#line-text" class="text"></use>
</svg>
</div>
通过css3动画实现文字笔画流动效果:
<style>
.container { /*svg外层容器*/
height:150px;
width:500px;
margin:0 auto;
}
.text { /*内部填充fill和外轮廓stroke属于svg属性而非css,但css中text-fill开头和text-stroke开头的属性能够实现类似效果*/
font-size: 140px;
font-weight: bolder;
fill: none; /*文字内部填充为空*/
stroke-width: 5; /*外轮廓线的宽度*/
stroke-dasharray: 0 240; /*定义外轮廓虚线的长度和间隔的循环单位*/
}
/*定义动画*/
@keyframes text1 {
100% {
stroke-dashoffset: 1000;
stroke-dasharray: 60 180;
}
}
@keyframes text2 {
100% {
stroke-dashoffset: 1060;
stroke-dasharray: 60 180;
}
}
@keyframes text3 {
100% {
stroke-dashoffset: 1120;
stroke-dasharray: 60 180;
}
}
@keyframes text4 {
100% {
stroke-dashoffset: 1180;
stroke-dasharray: 60 180;
}
}
/*调用动画*/
.text:nth-child(4n + 1) {
stroke: rgb(179, 157, 250);
animation: text1 4s 1s ease-in-out forwards;
}
.text:nth-child(4n + 2) {
stroke: rgb(198, 209, 79);
animation: text2 4s 1s ease-in-out forwards;
}
.text:nth-child(4n + 3) {
stroke: rgb(94, 167, 254);
animation: text3 4s 1s ease-in-out forwards;
}
.text:nth-child(4n + 4) {
stroke: rgb(107, 235, 203);
animation: text4 4s 1s ease-in-out forwards;
}
</style>
学海无涯,长路漫漫啊
标签:笔画,svg,ease,stroke,dasharray,rgb,流动,text,animation 来源: https://blog.csdn.net/weixin_49227608/article/details/110505851