论坛 › 马黑黑教程专版 › 文字效果集中营

马黑黑 发表于 2022-3-15 13:01

<svg width="700px" height="400px">
        <text x="10" y="60" font-family="MicrosoftYahei" font-size="60" stroke="red" fill="none">SVG空心字</text>
        <text x="10" y="140" font-family="MicrosoftYahei" font-size="60" stroke="red" fill="green">SVG描边字</text>
        <text x="10" y="220" font-family="MicrosoftYahei" font-weight="900" font-size="60" stroke-width="2" stroke="red" fill="none">SVG粗线空心字</text>
        <text x="10" y="300" font-family="MicrosoftYahei" font-weight="900" font-size="60" stroke-width="2" stroke="red" fill="green">SVG粗线描边字</text>
</svg>

马黑黑 发表于 2022-3-15 13:03

201#参考代码：

<svg width="700px" height="400px">
        <text x="10" y="60" font-family="MicrosoftYahei" font-size="60" stroke="red" fill="none">SVG空心字</text>
        <text x="10" y="140" font-family="MicrosoftYahei" font-size="60" stroke="red" fill="green">SVG描边字</text>
        <text x="10" y="220" font-family="MicrosoftYahei" font-weight="900" font-size="60" stroke-width="2" stroke="red" fill="none">SVG粗线空心字</text>
        <text x="10" y="300" font-family="MicrosoftYahei" font-weight="900" font-size="60" stroke-width="2" stroke="red" fill="green">SVG粗线描边字</text>
</svg>

马黑黑 发表于 2022-3-15 13:09

<svg width="700px" height="400px">
        <text x="10" y="80" font-family="MicrosoftYahei" font-weight="900" font-size="60" stroke-width="2" stroke="red" fill="none" dy="20 40 30 0 -20 -30 10">
                SVG错落排版
        </text>
</svg>

马黑黑 发表于 2022-3-15 13:09

203#参考代码：

<svg width="700px" height="400px">
        <text x="10" y="80" font-family="MicrosoftYahei" font-weight="900" font-size="60" stroke-width="2" stroke="red" fill="none" dy="20 40 30 0 -20 -30 10">
                SVG错落排版
        </text>
</svg>

红影 发表于 2022-3-15 21:59

马黑黑 发表于 2022-3-15 12:25
共同辛苦

是你辛苦啊，我只是跟着看，有什么辛苦的{:4_173:}

红影 发表于 2022-3-15 21:59

马黑黑 发表于 2022-3-15 12:26
不仅仅是习惯，更多的是逻辑问题

哦哦，知道了{:4_187:}

红影 发表于 2022-3-15 22:00

马黑黑 发表于 2022-3-15 13:01
SVG空心字
        SVG描边字
        SVG粗线空心字


这几个效果也弄过来了，真好{:4_187:}

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

红影 发表于 2022-3-15 22:00
这几个效果也弄过来了，真好

应该挺好的吧，简单

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

红影 发表于 2022-3-15 21:59
哦哦，知道了

{:5_108:}

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

红影 发表于 2022-3-15 21:59
是你辛苦啊，我只是跟着看，有什么辛苦的

你们要去理解，不容易的

红影 发表于 2022-3-16 09:18

马黑黑 发表于 2022-3-15 22:12
应该挺好的吧，简单

是的，而且集中起来最好，想找哪个就找哪个{:4_173:}

红影 发表于 2022-3-16 09:24

马黑黑 发表于 2022-3-15 22:12
你们要去理解，不容易的

我们有机会学习，是多么幸运的事啊。谢谢黑黑{:4_187:}

马黑黑 发表于 2022-3-16 09:29

红影 发表于 2022-3-16 09:24
我们有机会学习，是多么幸运的事啊。谢谢黑黑

客气啥呢，一样探讨

马黑黑 发表于 2022-3-16 09:30

红影 发表于 2022-3-16 09:18
是的，而且集中起来最好，想找哪个就找哪个

没错

马黑黑 发表于 2022-3-16 11:44

<style>
.txtBg {
        font-size: 4rem;
        color: transparent;
        width: 500px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
        background-size: 500px 100px;
        background-position: 500px 0;
        background-clip: text;
        border: 1px solid;
        background-clip: text;
        -webkit-background-clip: text;
        animation: chgc 2s linear infinite;
}
@keyframes chgc {
        from { background-position: -500px 0; }
        to { background-position: 0 0; }
}
</style>

<div class="txtBg">动态变色文本</div>

马黑黑 发表于 2022-3-16 11:44

本帖最后由 马黑黑 于 2022-3-16 12:50 编辑

215楼代码：

<style>
.txtBg {
      font-size: 4rem;
      color: transparent;
      width: 500px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
      background-size: 500px 100px;
      background-position: 500px 0;
      border: 1px solid;
      background-clip: text;
      -webkit-background-clip: text;
      animation: chgc 2s linear infinite;
}
@keyframes chgc {
      from { background-position: -500px 0; }
      to { background-position: 0 0; }
}
</style>

<div class="txtBg">动态变色文本</div>

红影 发表于 2022-3-16 13:04

马黑黑 发表于 2022-3-16 09:29
客气啥呢，一样探讨

那就不客气了，把感谢放在心里{:5_108:}

马黑黑 发表于 2022-3-16 13:07

红影 发表于 2022-3-16 13:04
那就不客气了，把感谢放在心里

{:5_108:}

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

<style type="text/css">
.outer {
        display: flex;
        justify-content: center;
        width: 300px;
        height: 300px;
        background: none;
        position: relative;
        animation: Roll 10s linear infinite;
}
.inner {
        position: absolute;
        width: 30px;
        height: 30px;
        font: bold 20px/30px '微软雅黑' ;
        color: #d2691e;
        text-align: center;
        background: none;
        transform-origin: 50% 150px;
}
@keyframes Roll {
        to { transform: rotate(-1turn); }
}
</style>

<div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
</div>

<script>

var text = "万万千千恨前前后后山傍人道我轿儿宽不道被他遮得望伊难真的好难";
var str = "";
       
for(i=0; i<30; i++) {
        str += "<div class='inner' style='transform: rotate(" + i*12 +"deg)'>" + text.charAt(i) + "</div>\n";
}
document.querySelector(".outer").innerHTML = str;

</script>

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

219楼：风车字代码

<style type="text/css">
.outer {
        display: flex;
        justify-content: center;
        width: 300px;
        height: 300px;
        background: none;
        position: relative;
        animation: Roll 10s linear infinite;
}
.inner {
        position: absolute;
        width: 30px;
        height: 30px;
        font: bold 20px/30px '微软雅黑' ;
        color: #d2691e;
        text-align: center;
        background: none;
        transform-origin: 50% 150px;
}
@keyframes Roll {
        to { transform: rotate(-1turn); }
}
</style>

<div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
</div>

<script>
var text = "万万千千恨前前后后山傍人道我轿儿宽不道被他遮得望伊难真的好难";
var str = "";
for(i=0; i<30; i++) {
        str += "<div class='inner' style='transform: rotate(" + i*12 +"deg)'>" + text.charAt(i) + "</div>\n";
}
document.querySelector(".outer").innerHTML = str;
</script>

查看完整版本: 文字效果集中营