论坛 › 马黑黑教程专版 › css-doodle: 文字逐个落下示例

马黑黑 发表于 2023-5-14 20:52

css-doodle: 文字逐个落下示例

<style>
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box;         overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
</style>

<p>代码：</p>
<div class="mama">
<pre class="hCode">&lt;css-doodle grid="7x1" click-to-update&gt;
        :doodle { @size: 400px; }
        @size: 40px;
        @shape: circle;
        background: gray;
        :after { content: @pn([天高几许问真龙]); }
        animation: fall 1s calc((@i - 1) * 1s) linear forwards;
        @keyframes fall {
                from { transform: translateY(0); }
                to { transform: translateY(360px); }
        }
&lt;/css-doodle&gt;
</pre>
<pre class="hLineNum"></pre>
</div>
<p><br><br><button class="btnok" type="button" value="运行代码">运行代码</button><br><br></p>
<div class="stage"></div>
<p>代码分析：</p>
<p>重点在 animation 属性的赋值。每个单元格都是一秒的运行时长，延时算法根据各自的序号减 1 乘以 1 得到，linear 是匀速运行，forwards 表示保持最后一帧的状态。</p>
<p>小提示：单击运行框，一切重来。</p>

<script>

let script = document.createElement('script');
script.src = 'https://www.huachaowang.com/css-doodle.min.js';
document.head.appendChild(script);

let btns = document.querySelectorAll('.btnok'),
        stages = document.querySelectorAll('.stage'),
        hCodes = document.querySelectorAll('.hCode'),
        hLineNums = document.querySelectorAll('.hLineNum'),
        mamas = document.querySelectorAll('.mama');

btns.forEach((item,key) => {
        let lines = hCodes.innerText.trim().split('\n').length;
        let str = '';
        for(i = 0; i < lines; i ++) {
                str += i + 1 + '\n';
        }
        hLineNums.innerText = str;
        mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
        item.onclick = () => {
                let val = item.value;
                stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
                item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
        }
});

</script>

南无月 发表于 2023-5-14 20:55

厉害，就是这个效果

马黑黑 发表于 2023-5-14 20:55

顺便提一下，论坛已经上传了 css-doodle 资源文档，地址为：

https://www.huachaowang.com/css-doodle.min.js

在论坛中，引用资源文档的方法如下（JS代码部分）：

let script = document.createElement('script');
script.src = 'https://www.huachaowang.com/css-doodle.min.js';
document.head.appendChild(script);

醉美水芙蓉 发表于 2023-5-14 21:06

马黑黑 发表于 2023-5-14 21:09

南无月 发表于 2023-5-14 20:55
厉害，就是这个效果

所以叫你研究一下，你全网跑一遍就可以了

马黑黑 发表于 2023-5-14 21:09

醉美水芙蓉 发表于 2023-5-14 21:06
欣赏黑黑老师教程分享！

晚上嚎

红影 发表于 2023-5-14 21:30

来学习了，虽然不是很懂。没看出来为什么是逐个落下的{:4_173:}

亦是金 发表于 2023-5-14 21:44

马黑黑 发表于 2023-5-14 20:55
顺便提一下，论坛已经上传了 css-doodle 资源文档，地址为：

https://www.huachaowang.com/css-doodle.m ...

谢谢马黑黑老师，辛苦了！{:4_190:}收藏了，更换了。

马黑黑 发表于 2023-5-14 22:01

亦是金 发表于 2023-5-14 21:44
谢谢马黑黑老师，辛苦了！收藏了，更换了。

辛苦

马黑黑 发表于 2023-5-14 22:01

红影 发表于 2023-5-14 21:30
来学习了，虽然不是很懂。没看出来为什么是逐个落下的

看解释

红影 发表于 2023-5-14 22:36

马黑黑 发表于 2023-5-14 22:01
看解释

嗯嗯，看到了。
“延时算法根据各自的序号减 1 乘以 1 得到”

马黑黑 发表于 2023-5-14 22:38

红影 发表于 2023-5-14 22:36
嗯嗯，看到了。
“延时算法根据各自的序号减 1 乘以 1 得到”

对

红影 发表于 2023-5-14 22:44

马黑黑 发表于 2023-5-14 22:38
对

嗯嗯，学习了{:4_187:}

马黑黑 发表于 2023-5-14 23:12

红影 发表于 2023-5-14 22:44
嗯嗯，学习了

学以致用最好

樵歌 发表于 2023-5-15 08:40

狠好！请问：光落字不要那圈圈成不？多行字肿么办？如何调整字的颜色？

樵歌 发表于 2023-5-15 08:41

反正我也是菜鸟，就多问点。{:4_173:}

马黑黑 发表于 2023-5-15 11:55

樵歌 发表于 2023-5-15 08:40
狠好！请问：光落字不要那圈圈成不？多行字肿么办？如何调整字的颜色？

文本颜色用 color 属性；
文字不要背景，可将 background 属性去掉、border-radius 属性也去掉。
多行逐字落下在 css-doodle 里操作起来比较繁琐、

我这个只是一个范例，主要演示文本逐字下落的原理，其他更多功能没有演示。

马黑黑 发表于 2023-5-15 11:55

樵歌 发表于 2023-5-15 08:41
反正我也是菜鸟，就多问点。

{:4_190:}

红影 发表于 2023-5-15 14:02

马黑黑 发表于 2023-5-14 23:12
学以致用最好

看到今天弄个诗句，不是下落的，而是逐渐显示颜色的。

樵歌 发表于 2023-5-15 16:32

马黑黑 发表于 2023-5-15 11:55
文本颜色用 color 属性；
文字不要背景，可将 background 属性去掉、border-radius 属性也去掉。
多行 ...

谢谢，反正跟我说了也是白说。以后也是抄个作业也得请人帮忙的{:4_189:}

查看完整版本: css-doodle: 文字逐个落下示例