节前说的教程3 竟然拖到现在
今天点开一看，原来节前就写了，忘得一干二净。
顺便放一下前面两个教程链接，貌似第二个背景换成深色的会更好看一点
https://www.paipai.fm/r7871263
https://www.paipai.fm/r7882790
最近听同事说后面要换新的监控软件，所以之后是越来越严格嘛，心塞塞
今天大领导开会去了，大摸特摸。
先上来水一个小鱼缸。
废话不多说，开始。
效果如下：
又又又开始水字数大法。
思路🔜：
1️⃣用svg画出坐标在原点的100*50的文本，在左侧10%，竖直50%的位置开始。
2️⃣定义了一个持续时间8s的反复循环的stroke动画；
3️⃣设置文本大小间隔和粗细；
4️⃣设置关键帧动画效果；
5️⃣0%：文字透明，虚线描边效果；
6️⃣70%：文字保持透明，描边颜色不变，虚线模式不变；
7️⃣90%和100%：文字变色，描边消失，虚线模式变为实线；
========搞定分割线===========
小鱼缸进度应该快了，嘿嘿开心。
月初的事情忙完之后，终于开始闲了点。
三天打鱼两天晒网的学习又可以继续了。
代码在这里！直接复制粘贴！【大写加粗】
<svg viewBox="0 0 100 50">
<text x="10%" y="50%"> 裴之 </text>
</svg>
<style type="text/css">
svg text {
animation: stroke 6s infinite alternate;
letter-spacing: 1px;
font-size: 18px;
font-weight: 200;
}
@keyframes stroke {
0% {
fill:rgba(247, 170, 151,0);
stroke: rgba(222, 126, 115, 1);
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 0.5;
}
70% {
fill: rgba(247, 170, 151, 0);
stroke: rgba(222, 126, 115, 1);
stroke-width: 0.5;
}
90%,
100% {
fill: rgba(255, 190, 152, 1);
stroke: rgba(222, 126, 115, 0);
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 0;
}
}
</style>
引用
补充内容(2024-10-12 15:49)
【裴之】可换成任意文字
建议字数不要太长，太长的话需要修改属性；
另外需要发送时需要勾选html
