css-doodle“凌迟”大象

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

凌迟大象？太残忍了！css-doodle 是一个制造美的工具，不会去做邪恶的事情。

其实我们要做的事情是，使用 css-doodle 单元格将大象的图片一块一块地加载，最终组成完整的大象图片。当然，我们可以一次性在 :doodl{} 选择器中使用 background 属性来加载完整的大象图片，我们之所以使用单元格一一加载图片的不同区域，意在借助 css-doodle 我们可以处理图片的不同部位。

准备工作很简单，一是运行 css-doodle 的环境，二是一幅大象图片。

现在来看看代码：

<css-doodle grid="12x8">
	: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;
</css-doodle>

效果怎么样？O(∩_∩)O哈哈哈~其实图片是根雕。

解释一下原理：利用 background 简写属性给单元格设置背景图片，每一个单元格的背景图片都是同一张图，但各个单元格使用的是图片的不同的部位。各单元格使用图片的起始位置即图片的XY坐标要一一对应，第一个单元格从 {0,0} 开始，第二个单元格即第一行第二列的那个单元格则要将图片左移一个单元格的长度，第二行第一列的单元格则需要将图片上移一个单元格，其余单元格的原理与此一致。所以，我们利用 css-doodle 的 @col() 和 @row() 函数可以计算各单元格截取图片的XY坐标值，这些值应为负数（图片向左、向上移动）。

最后，提示一下，css-doodle 的尺寸设置要和图片的实际尺寸相一致。