论坛 › 马黑黑教程专版 › css-doodle“凌迟”大象

马黑黑 发表于 2023-5-7 23:31

css-doodle“凌迟”大象

<style>
.papa > p, .papa > pre { margin: 8px 0; }
.mama {
        width: 100%;
        position: relative;
}
.hCode, .hLineNum {
        padding: 10px;
        width: calc(100% - 40px);
        background: #eee;
        box-sizing: border-box;
        overflow-x: auto;
        position: absolute;
}
.hCode { left: 40px; }
.hLineNum { width: 40px; background: #ccc; text-align: right; pointer-events: none; }
</style>

<div class="papa">

<p>凌迟大象？太残忍了！css-doodle 是一个制造美的工具，不会去做邪恶的事情。</p>
<p>其实我们要做的事情是，使用 css-doodle 单元格将大象的图片一块一块地加载，最终组成完整的大象图片。当然，我们可以一次性在 :doodl{} 选择器中使用 background 属性来加载完整的大象图片，我们之所以使用单元格一一加载图片的不同区域，意在借助 css-doodle 我们可以处理图片的不同部位。</p>
<p>准备工作很简单，一是运行 css-doodle 的环境，二是一幅大象图片。</p>
<p>现在来看看代码：</p>

<div class="mama">
<pre class="hLineNum"></pre>
<pre class="hCode">&lt;css-doodle grid="12x8"&gt;
        :doodle { @size: 600px 423px; margin: auto; }
        background: url('https://638183.freep.cn/638183/t23/1/elephant1.jpg') calc((@col - 1) * 600 / @size-col * -1px) calc((@row - 1) * 423 / @size-row * -1px);
        :hover { transform: rotate(360deg); }
        transition: 3s;
&lt;/css-doodle&gt;</pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>效果怎么样？O(∩_∩)O哈哈哈~其实图片是根雕。</p>
<p>解释一下原理：利用 background 简写属性给单元格设置背景图片，每一个单元格的背景图片都是同一张图，但各个单元格使用的是图片的不同的部位。各单元格使用图片的起始位置即图片的XY坐标要一一对应，第一个单元格从 {0,0} 开始，第二个单元格即第一行第二列的那个单元格则要将图片左移一个单元格的长度，第二行第一列的单元格则需要将图片上移一个单元格，其余单元格的原理与此一致。所以，我们利用 css-doodle 的 @col() 和 @row() 函数可以计算各单元格截取图片的XY坐标值，这些值应为负数（图片向左、向上移动）。</p>
<p>最后，提示一下，css-doodle 的尺寸设置要和图片的实际尺寸相一致。</p>

</div>

<script>

let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/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-8 06:58

等看那个徒弟先做出效果图图出来{:4_203:}

马黑黑 发表于 2023-5-8 08:07

樵歌 发表于 2023-5-8 06:58
等看那个徒弟先做出效果图图出来

效果图不是已经出来了吗？点一下“运行代码”按钮

红影 发表于 2023-5-8 09:05

这张图图本来就是切开的大象。还以为是用css-doodle把大象切开的呢{:4_173:}

红影 发表于 2023-5-8 09:06

不过每一张小的单元格能让单独的一块做旋转，也算是切割了大象吧{:4_173:}

马黑黑 发表于 2023-5-8 13:13

红影 发表于 2023-5-8 09:06
不过每一张小的单元格能让单独的一块做旋转，也算是切割了大象吧

这是根雕

马黑黑 发表于 2023-5-8 13:14

红影 发表于 2023-5-8 09:05
这张图图本来就是切开的大象。还以为是用css-doodle把大象切开的呢

根雕的形状

樵歌 发表于 2023-5-8 16:39

马黑黑 发表于 2023-5-8 08:07
效果图不是已经出来了吗？点一下“运行代码”按钮

看到了看到了，原来是一块儿一小块儿拼起来的{:4_189:}

马黑黑 发表于 2023-5-8 17:31

樵歌 发表于 2023-5-8 16:39
看到了看到了，原来是一块儿一小块儿拼起来的

对{:4_190:}

红影 发表于 2023-5-8 19:10

马黑黑 发表于 2023-5-8 13:13
这是根雕

这是分块{:4_173:}

红影 发表于 2023-5-8 19:10

马黑黑 发表于 2023-5-8 13:14
根雕的形状

很奇特的样子{:4_187:}

马黑黑 发表于 2023-5-8 20:07

红影 发表于 2023-5-8 19:10
很奇特的样子

根雕嘛，有个大致的形状，然后根据创作者的思路，就那个形状做加工

马黑黑 发表于 2023-5-8 20:08

红影 发表于 2023-5-8 19:10
这是分块

估计绝大多数人都会这么觉得

红影 发表于 2023-5-8 20:24

马黑黑 发表于 2023-5-8 20:07
根雕嘛，有个大致的形状，然后根据创作者的思路，就那个形状做加工

想雕成什么就是什么呗。

红影 发表于 2023-5-8 20:25

马黑黑 发表于 2023-5-8 20:08
估计绝大多数人都会这么觉得

我感觉里就是一个个分块啊{:4_173:}

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

红影 发表于 2023-5-8 20:25
我感觉里就是一个个分块啊

这个感觉正常

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

红影 发表于 2023-5-8 20:24
想雕成什么就是什么呗。

也不是的，要顺势而为，就像庄子的庖丁解牛那样

红影 发表于 2023-5-8 21:25

马黑黑 发表于 2023-5-8 20:55
这个感觉正常

眼睛看到什么就信什么了{:4_173:}

红影 发表于 2023-5-8 21:26

马黑黑 发表于 2023-5-8 20:55
也不是的，要顺势而为，就像庄子的庖丁解牛那样

这个顺势需要知道都有哪些势才行{:4_173:}

马黑黑 发表于 2023-5-8 21:55

红影 发表于 2023-5-8 21:26
这个顺势需要知道都有哪些势才行

所以要学学庖丁

查看完整版本: css-doodle“凌迟”大象