论坛 › 马黑黑教程专版 › svg文本淡入淡出

马黑黑 发表于 2022-3-17 22:39

svg文本淡入淡出

本帖最后由 马黑黑 于 2022-3-17 22:46 编辑 <br /><br /><style>
#mama { width:100%; }
#mama p { padding: 8px 0;}
</style>

<div id="mama">
        <p>我们对svg的文本已经不陌生，我们已经知道，svg里的text标签内的文本，具有HTML文本的特性，可以选择、复制，我们还知道，通过 textPath 与svg的路径 path 绑定，文本还可以拥有别开生面的呈现方式。可我们目前还不知道，svg的文本还可以动。试看以下代码和运行效果：</p>
        <p>        &lt;svg width="400" height="70"&gt;<br>
                        &nbsp;&nbsp;&nbsp; &lt;text x="10" y="50" fill="red" font-family="Microsoft Yahei" font-size="40"&gt;<br>
                        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 天若有情天亦老<br>
                        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;animate attributeName="x" attributeType="auto" from="700" to="-280" dur="5s" repeatCount="indefinite" /&gt;<br>
                        &nbsp;&nbsp;&nbsp; &lt;text&gt;<br>
                        &lt;/svg&gt;<br>
        </p>

        <svg width="400" height="70">
          <text x="10" y="50" fill="red" font-family="Microsoft Yahei" font-size="40">
                天若有情天亦老
                <animate attributeName="x" attributeType="auto" from="400" to="-270" dur="5s" repeatCount="indefinite"></animate>
          <text>
        </text></text></svg>

        <p>animate就是svg动画之一，它有诸多属性，让我们一一来理解：<br><br>
                ① attributeName : 要变化的 text 标签里的属性名称。例中值为 x，指的是 x="10" 中的 x，起笔处<br>
                ② attributeType : 要变化的标签类型，auto 指自动识别。本属性可不要，多数浏览器不会识别不了<br>
                ③ from : 从哪开始变化<br>
                ④ to : 变化到什么地方<br>
                ⑤ dur : 动画一次运行的时长<br>
                ⑥ repeartcount : 重复次数。indefinite 为无尽模式重复<br>
        </p>
        <p>瞧，一切都在HTML代码里设定，无需CSS定义样式和动画（但svg部分支持CSS）。</p>
        <p>例中的 animate 标签代码里，我们略作改动，就可以令文本朝相反方向运行：from 和 to 的值对换一下便可。而要上下运动，首先需要改变svg的高度以便构建运动空间，然后 attributeName 的值指定为 y 就OK了。</p>
        <p>至于 from 和 to 的值如何设定，这是根据需要来，这里要提醒的是，它们的值应与svg的高宽配套。还需要提醒一下，svg不好定位，如果需要将其随意放置，可将其作为div盒子里的子元素，这样我们只需改变div盒子的位置。</p>
</div>

马黑黑 发表于 2022-3-17 23:08

<p>CSS的translate也是可以的，这里仅以 translateX 为例：<br><br></p>
<p>代码：</p><p><br></p><p>&lt;style&gt;</p><p>.mvBox {</p><p><span style="white-space:pre">        </span>position: relative;</p><p><span style="white-space:pre">        </span>width: 120px;</p><p><span style="white-space:pre">        </span>height: 40px;</p><p><span style="white-space:pre">        </span>line-height: 40px;</p><p><span style="white-space:pre">        </span>font-size: 16px;</p><p><span style="white-space:pre">        </span>animation: mq linear 3s infinite;</p><p>}</p><p>@keyframes mq {</p><p><span style="white-space:pre">        </span>from { transform: translateX(200px); }</p><p><span style="white-space:pre">        </span>to { transform: translateX(0); }</p><p>}</p><p>&lt;/style&gt;</p><p><br></p><p>&lt;div class="mvBox"&gt;天若有情天亦老&lt;/div&gt;</p><p><br></p><p>效果：</p>

<style>
.mvBox {
        position: relative;
        width: 120px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        animation: mq linear 3s infinite;
}
@keyframes mq {
        from { transform: translateX(200px); }
        to { transform: translateX(0); }
}
</style>

<div class="mvBox">天若有情天亦老</div>

大猫咪 发表于 2022-3-17 23:21

{:4_179:}老黑 {:4_187:}有你真好，辛苦啦{:4_191:} 走一个！

马黑黑 发表于 2022-3-18 07:18

大猫咪 发表于 2022-3-17 23:21
老黑 有你真好，辛苦啦   走一个！

干杯

红影 发表于 2022-3-18 10:19

马黑黑 发表于 2022-3-17 23:08
CSS的translate也是可以的，这里仅以 translateX 为例：
代码：&lt;style&gt;.mvBox {        position: relative;       ...

这个我记得也可以淡入淡出的，现在只是滚动，不是淡入淡出{:4_187:}

红影 发表于 2022-3-18 10:20

纯代码的滚动字，这个好，以后可以把原来的那些滚动字都替换掉了{:4_173:}

红影 发表于 2022-3-18 10:31

<style type="text/css">

.hy { position: relative; left:220px; top:150px; width: 360px; height: 60px; font-family: '楷体','微软雅黑'; font-size: 40px;}
</style>

<div class="hy">
<svg>
    <text x="10" y="50" fill="#1535B8" >
      学习黑黑代码
      <animate attributeName="x" attributeType="auto" from="700" to="-280" dur="10s" repeatCount="indefinite" />
    <text>
</svg>
</div>

红影 发表于 2022-3-18 10:34

这个svg的文本动画有点问题，要等挺长时间才开始动，不知道是什么原因。

红影 发表于 2022-3-18 10:36

马黑黑 发表于 2022-3-17 23:08
CSS的translate也是可以的，这里仅以 translateX 为例：
代码：&lt;style&gt;.mvBox {        position: relative;       ...

还是css的比较好，直接就能动。

红影 发表于 2022-3-18 10:48

找到了前面一个帖子
文字走马灯之淡进淡出
https://www.huachaowang.com/forum.php?mod=viewthread&tid=56697&fromuid=2
(出处: 花潮论坛)

红影 发表于 2022-3-18 10:58

<style>
.m1 {
      position: relative;
      border: 0px solid;
      left:220px; top:150px;
      width:300px;
      overflow: hidden;
}
.m1 p {
      position: relative;
      height: 60px; font-family: '楷体','微软雅黑'; font-size: 40px;
      left: 600px;
      width: 300px;
      color: #1535B8;
      animation: hy 8s linear infinite;
}
@keyframes hy {
      0%                { left: 300px;}
      100%      { left: -270px; }
}
</style>

<div class="m1">
      <p>学习黑黑代码</p>
</div>

红影 发表于 2022-3-18 11:05

CSS模拟marquee效果
https://www.huachaowang.com/forum.php?mod=viewthread&tid=56619&fromuid=2
(出处: 花潮论坛)

把这个帖子也搬来这里，既然marquee标签已被废弃，以后要学会用css方式做滚动字。

马黑黑 发表于 2022-3-18 12:40

红影 发表于 2022-3-18 11:05
CSS模拟marquee效果
https://www.huachaowang.com/forum.php?mod=viewthread&tid=56619&fromuid=2
(出处: ...

好的，已经添加

马黑黑 发表于 2022-3-18 12:41

红影 发表于 2022-3-18 10:36
还是css的比较好，直接就能动。

都是CSS，那个是CSS动画，我没怎么调好吧

马黑黑 发表于 2022-3-18 12:42

红影 发表于 2022-3-18 10:19
这个我记得也可以淡入淡出的，现在只是滚动，不是淡入淡出

淡入淡出就是滚动吧，自左向右或相反、自上向下或相反的那类

红影 发表于 2022-3-18 14:44

马黑黑 发表于 2022-3-18 12:40
好的，已经添加

都是黑黑以前的帖子，影子一直记着呢{:4_187:}

红影 发表于 2022-3-18 14:44

马黑黑 发表于 2022-3-18 12:41
都是CSS，那个是CSS动画，我没怎么调好吧

不知道为什么svg的开始不动，要等一段时间才动呢。

红影 发表于 2022-3-18 14:45

马黑黑 发表于 2022-3-18 12:42
淡入淡出就是滚动吧，自左向右或相反、自上向下或相反的那类

嗯嗯，不过，是从看不到滚动出来，再进入看不到。或者从透明度0变化到1？

马黑黑 发表于 2022-3-18 15:11

红影 发表于 2022-3-18 14:45
嗯嗯，不过，是从看不到滚动出来，再进入看不到。或者从透明度0变化到1？

这些都可以弄的，我提供的是实现原理，细节自己去试试就OK了。

马黑黑 发表于 2022-3-18 15:12

红影 发表于 2022-3-18 14:44
不知道为什么svg的开始不动，要等一段时间才动呢。

不会吧？一开始就动的，是不是时间、长度等设置不合理？

查看完整版本: svg文本淡入淡出