文字效果集中营

马黑黑

马黑黑

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>

马黑黑

马黑黑

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 12:25
共同辛苦

是你辛苦啊，我只是跟着看，有什么辛苦的

红影

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

哦哦，知道了

红影

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

这几个效果也弄过来了，真好

马黑黑

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

应该挺好的吧，简单

马黑黑

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

马黑黑

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

你们要去理解，不容易的

红影

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

是的，而且集中起来最好，想找哪个就找哪个

红影

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

我们有机会学习，是多么幸运的事啊。谢谢黑黑

马黑黑

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

客气啥呢，一样探讨

马黑黑

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

没错

马黑黑

动态变色文本

马黑黑

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 09:29
客气啥呢，一样探讨

那就不客气了，把感谢放在心里

马黑黑

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

马黑黑

马黑黑

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>