论坛 › 马黑黑教程专版 › css-doodle：逐字显示演示

马黑黑 发表于 2023-5-15 13:16

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>思路：每一个单元格装载一个字，让它们依次排列，排列算法要考虑到诗行。各单元格开始时全透明，通过关键帧动画逐一显现，涉及到的算法在 css-doodle 里是简单的。以下是代码，我们给 :doodle{} 选择器嵌套了一个 css-doodle 背景。逐字显示的代码在 16 到 26 行之间：<br></p>
<div class="mama">
        <pre class="hCode">&lt;css-doodle grid="6x4" click-to-update&gt;
        :doodle {
                @size: 600px 400px;
                background: @doodle(
                        @grid: 1 / 100%;
                        background: gray;
                        clip-path: @shape(
                                points: 1000;
                                scale: .8;
                                move: .5 .64;
                                x: cos(t^t) + cos(1.8^t);
                                y: sin(t) + sin(2.305t)*sin(t);
                        );
                );
        }
        @size: 40px;
        @place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);
        font: normal 30px / 40px sans-serif;
        color: rgb(@m3(@r(255)));
        text-shadow: 1px 1px 2px #000;
        opacity: 0;
        :before {
                content: @pn([泠泠七弦上，静听松风寒。古调虽自爱，今人多不弹。]);
        }
        animation: show .3s calc((@i - 1) * .3s) linear forwards;
        @keyframes show { to { opacity: 1; } }
&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>

<script>

let script = document.createElement('script');
script.src = '/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-15 13:42

这个脸制图都是代码完成的，文字也能按需要逐字显示，这个厉害了{:4_187:}

红影 发表于 2023-5-15 13:44

clip-path: @shape(……） 这个一直都看不懂，包括上一个帖子里也是{:5_102:}

红影 发表于 2023-5-15 15:03

红影 发表于 2023-5-15 13:44
clip-path: @shape(……） 这个一直都看不懂，包括上一个帖子里也是

我找到了，这个是入门（七）里的内容，当时就学的不够好，所以碰到具体的例子就迷糊了{:4_173:}

樵歌 发表于 2023-5-15 15:55

好好好！以后咱凑个七绝啥的就用这个呗。
另外，加个标题（比如：七绝，题花潮论坛）加哪里？若加点音乐，那几行又加在哪儿？{:4_190:}

醉美水芙蓉 发表于 2023-5-15 17:05

马黑黑 发表于 2023-5-15 17:40

醉美水芙蓉 发表于 2023-5-15 17:05
记得以前教过逐字显示，都还给老师了！接着学吧！

以前的是通过JS实现，能实现更为复杂的效果；这个是基于css-doodle的，处理文本不是它的长项

南无月 发表于 2023-5-15 20:38

图好看，字也好看{:4_173:}

马黑黑 发表于 2023-5-15 20:46

南无月 发表于 2023-5-15 20:38
图好看，字也好看

还行

南无月 发表于 2023-5-15 21:03

马黑黑 发表于 2023-5-15 20:46
还行

{:4_170:}跟了一个。

马黑黑 发表于 2023-5-15 21:30

南无月 发表于 2023-5-15 21:03
跟了一个。

效果如何

梦缘 发表于 2023-5-15 21:54

很好的分享，感谢！

马黑黑 发表于 2023-5-15 21:56

梦缘 发表于 2023-5-15 21:54
很好的分享，感谢！

{:4_190:}

南无月 发表于 2023-5-15 22:23

马黑黑 发表于 2023-5-15 21:30
效果如何

十分好看，有山有水有诗{:4_173:}

马黑黑 发表于 2023-5-15 23:05

南无月 发表于 2023-5-15 22:23
十分好看，有山有水有诗

俗称山水诗

南无月 发表于 2023-5-16 17:47

马黑黑 发表于 2023-5-15 23:05
俗称山水诗

也叫田园诗

马黑黑 发表于 2023-5-16 18:18

南无月 发表于 2023-5-16 17:47
也叫田园诗

好像有这个说法

南无月 发表于 2023-5-16 20:51

马黑黑 发表于 2023-5-16 18:18
好像有这个说法

{:4_173:}这个是普通的说法

马黑黑 发表于 2023-5-16 21:20

南无月 发表于 2023-5-16 20:51
这个是普通的说法

额

南无月 发表于 2023-5-16 22:37

马黑黑 发表于 2023-5-16 21:20
额

额头，头大

查看完整版本: css-doodle：逐字显示演示