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

马黑黑 发表于 2022-3-12 10:05

60#代码：

<div id="rollChar"></div>

<script language="JavaScript">
//波浪字: 文本小-大-小渐变
var fontSize = 14;
var s = "落红不是无情物化作春泥更护花";
document.getElementById("rollChar").innerHTML = rText(s);

function rText(tstr){
        var outStr = "";
        for(j=0; j<tstr.length; j++){
                outStr += "<span style='font-size: " + fontSize + "px;'>" + tstr.slice(j,j+1) + "</span>";
                fontSize += (j >= Math.floor(tstr.length/2) ? -2 :2);
        }
        return outStr;
}

</script>

马黑黑 发表于 2022-3-12 10:12

<style type="text/css">
.xiewen {/* 斜纹文本 */
        margin: auto;
        width: 760px;
        height: 200px;
        line-height: 200px;
        font-family: '微软雅黑', '宋体';
        font-size: 6rem;
        font-weight: 900;
        text-align: center;
        background: darkgreen linear-gradient(45deg, transparent 45%, #eee 45%, #ccc 55%, transparent 0);
        background-size: 4px 4px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 2px #111;
}
</style>

<div class="xiewen">年年岁岁花相似</div>

马黑黑 发表于 2022-3-12 10:13

62#代码：

<style type="text/css">
.xiewen {/* 斜纹文本 */
        margin: auto;
        width: 760px;
        height: 200px;
        line-height: 200px;
        font-family: '微软雅黑', '宋体';
        font-size: 6rem;
        font-weight: 900;
        text-align: center;
        background: darkgreen linear-gradient(45deg, transparent 45%, #eee 45%, #ccc 55%, transparent 0);
        background-size: 4px 4px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 2px #111;
}
</style>

<div class="xiewen">年年岁岁花相似</div>

红影 发表于 2022-3-12 12:30

马黑黑 发表于 2022-3-11 11:40
我另外开帖子说明，已经发出一部分了，有空去看看

看到了，记得昨天还跟着做了轱辘诗的图图{:4_173:}

红影 发表于 2022-3-12 12:32

马黑黑 发表于 2022-3-11 11:42
但是JS也可以让人头发都白了还不明就里

有的时候也不需要明，能用就好{:4_173:}

红影 发表于 2022-3-12 12:32

马黑黑 发表于 2022-3-11 11:42
当然，这方面的发现很重要

嗯嗯，自己去做一下能感受到很多色彩组合里的规律。

红影 发表于 2022-3-12 12:46

马黑黑 发表于 2022-3-11 22:28
.gaog {
        font-family: '微软雅黑';
        font-weight: 900;


像有水纹一样，这些高光文字效果太美了{:4_199:}

红影 发表于 2022-3-12 12:51

马黑黑 发表于 2022-3-12 10:12
.xiewen {/* 斜纹文本 */
        margin: auto;
        width: 760px;


这些效果都好惊艳啊{:4_199:}

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

红影 发表于 2022-3-12 12:51
这些效果都好惊艳啊

嗯，这些是基于线性渐变的效果

马黑黑 发表于 2022-3-12 14:23

红影 发表于 2022-3-12 12:46
像有水纹一样，这些高光文字效果太美了

挺不错的

马黑黑 发表于 2022-3-12 14:23

红影 发表于 2022-3-12 12:32
嗯嗯，自己去做一下能感受到很多色彩组合里的规律。

对，是这样的

马黑黑 发表于 2022-3-12 14:24

红影 发表于 2022-3-12 12:32
有的时候也不需要明，能用就好

有现成的当然好，但不一定都合适自己的，所以还需要自己去制作

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

<style type="text/css">

#dropText { margin: 10px auto 0; width: 600px; height: 100px; position: relative; }
#dropText span { display: inline-block; font-size: 2rem; position: absolute; }

</style>

<div id="dropText"></div>

<script language="javascript">

var myStr = "正是江南好風景落花時節又逢君";
var ttLen = myStr.length;
var step = 0;
var spanId = 0;
var dt = document.getElementById("dropText");
//文本写入span标签
var num = 0;
while(num < ttLen) {
        dt.innerHTML += "<span id='span" + num + "' style='left: " + num*2 + "rem;top: 0;'>" + myStr.slice(num, num+1) + "</span>";
        num ++;
}
//启动定时器令文本逐一落下
setInterval(function drop() {
        var id = "span" + spanId;
        var tspan = document.getElementById(id);
        step++;
        tspan. style.top = step +"px";
        if(step > dt.clientHeight - 45){
                spanId ++;
                if(spanId >= ttLen){
                        spanId = 0;
                        Array.from(dt.children).forEach(function(item){ item.style.top = "0px"; }); //复位
                }
                step = 0;
        }
}, 10);

</script>

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

73#代码：

<style type="text/css">

#dropText { margin: 10px auto 0; width: 600px; height: 100px; position: relative; }
#dropText span { display: inline-block; font-size: 2rem; position: absolute; }

</style>

<div id="dropText"></div>

<script language="javascript">

var myStr = "正是江南好風景落花時節又逢君";
var ttLen = myStr.length;
var step = 0;
var spanId = 0;
var dt = document.getElementById("dropText");
//文本写入span标签
var num = 0;
while(num < ttLen) {
        dt.innerHTML += "<span id='span" + num + "' style='left: " + num*2 + "rem;top: 0;'>" + myStr.slice(num, num+1) + "</span>";
        num ++;
}
//启动定时器令文本逐一落下
setInterval(function drop() {
        var id = "span" + spanId;
        var tspan = document.getElementById(id);
        step++;
        tspan. style.top = step +"px";
        if(step > dt.clientHeight - 45){
                spanId ++;
                if(spanId >= ttLen){
                        spanId = 0;
                        Array.from(dt.children).forEach(function(item){ item.style.top = "0px"; }); //复位
                }
                step = 0;
        }
}, 10);

</script>

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

73#刚写好，制作了简单测试，不知道有木有问题

红影 发表于 2022-3-12 16:58

马黑黑 发表于 2022-3-12 14:22
嗯，这些是基于线性渐变的效果
这个帖子真的太好，以后做帖可以到这个帖子里来学文字的效果了{:4_187:}

红影 发表于 2022-3-12 16:59

马黑黑 发表于 2022-3-12 14:23
挺不错的

文字居然可以做出这么多效果，太惊艳了{:4_199:}

红影 发表于 2022-3-12 17:00

马黑黑 发表于 2022-3-12 14:24
有现成的当然好，但不一定都合适自己的，所以还需要自己去制作

是的，而且需要在制作中去真的弄到熟练{:4_187:}

红影 发表于 2022-3-12 17:00

马黑黑 发表于 2022-3-12 15:02
#dropText { margin: 10px auto 0; width: 600px; height: 100px; position: relative; }
#dropText s ...

哇，这个逐字掉落也好有趣啊{:4_199:}

红影 发表于 2022-3-12 17:04

马黑黑 发表于 2022-3-12 15:05
73#刚写好，制作了简单测试，不知道有木有问题

掉落的距离是那句定的？

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