艺术家 Zoran Pekoviċ 询问我，他们网站主页上的效果（目前使用Flash实现）是否可以用HTML、CSS和JavaScript来实现。
我觉得这是一个很有趣的挑战，所以我 尝试了一下。浏览器支持的范围可能不如Flash广泛，但总的来说，它更容易调整，并且可以在移动版Safari中使用。
我不会在这里放很多代码，因为这里没有我们之前没有涉及过的新内容。本质上，介绍部分是一些带有动画效果的div（额外的非语义div不是理想的选择，但有些东西是不可避免的，而且我认为它们在这里没有被滥用）。对于图片，所有九张图片都是绝对定位的，背景位置被设置为显示其正确的部分。当点击时（JavaScript），会过渡到占据整个区域的大小，并将background-position设置为0 0；
你太厉害了
很棒的挑战 :-)
很有创意
我从未想过可以在没有Flash的情况下实现
在Opera上表现不一致。
确实如此，我也注意到了。它可以工作，但图片之间的关系不太清晰，因为只有在图片完全动画化后才会出现在正确的位置。仍然令人印象深刻。
不错
为什么不使用jQuery的缓动效果来解决CSS过渡的一些“生硬”问题？（尽管如此，仍然很棒）
因为这应该只是CSS？是的，我知道JavaScript点击辅助程序破坏了这一点。
哇，真的很棒… :)
实际上，这是一个好主意！
使用CSS3也很容易实现…
显然，它（目前）还不是CSS动画的工作——在所有浏览器中除了Firefox 5之外都很生硬，甚至在Safari中尝试时完全崩溃了我的MBP。
然而，这是一个有趣的案例，Flash可以被HTML取代。
在我的Chrome上运行良好，非常酷。
我尽可能避免使用Flash，所以看到你做到这一点真是太棒了。
很酷。
非常好。在Chrome或Safari中效果不太好。在Firefox中效果最佳。
在我的Linux上的Chrome 13上运行良好。
也许您可以尝试使用
clipCSS属性。这里有一个简单的示例：http://jsfiddle.net/Uem9w/embedded/result/我同意；我认为clip()是可行的办法。这是一个更完整的示例：http://jsfiddle.net/e8zur/embedded/result/
适用于IE8+（减去动画）并处理键盘焦点。下面的复选框解决方案也很好地处理了焦点/模糊，不像这个解决方案，它需要一点额外的JS来处理展开图像上的点击（尽管在没有JS的情况下仍然可以使用）。然而，据我所知，复选框解决方案仅限于webkit。
哇，太棒了！！
不错，Chris。它甚至可以在IE7中运行。如上所述，动画部分在Opera中有点不正常，尽管动画停止后它又恢复正常了。
如果有一种方法可以完全摆脱JavaScript那就太好了。如果没有，似乎一个更依赖JS的解决方案可能更简单，并且具有更广泛的浏览器支持。
但这并不能减少这是一个关于你几乎可以仅用CSS完成什么的绝佳例子的事实。
Chris——这太棒了……我完全想把Flash从地球上抹去。
另外一点——我太喜欢你的页脚了。我发现每次访问你的网站时，我都会浪费3到4分钟的时间来回滚动你的头部……谢谢兄弟。
哇，CSS的强大威力，我爱它。如果你开动你的创意思维，在CSS中可以完成令人惊奇的事情。
很棒的工作——比Flash稍微有点卡顿，但仍然是非常优秀的工作！
太棒了。抛开挑战不谈，这是为数不多的Flash可能是正确工具的场景之一。尽管如此，仍然令人印象深刻。
Chris，很棒的工作。
哈哈，太棒了。应该有一些Flash到CSS/Jquery的比赛。我喜欢看到这样的东西！
Flash在过去很有趣。很高兴看到所有Swish和Flash时代的东西有点可移植。一如既往地感谢这些主题，Chris。
证明了Flash并没有像Stevie希望的那样消亡。
Flash在某些方面仍然具有一定的优势。并且它几乎可以在所有浏览器（除了iOS浏览器）上运行。
也就是说，Google的HTML5/JS等音乐视频真的很酷。不过它们并没有在很多浏览器上运行。
确实是一个非常酷的技术！！我可以看到它的用途……所以感谢你做了这么多的努力让它工作。
这太棒了 :) 但它在Chrome（Windows）上有一些动画故障。我采用了Lim Chee Aun（上面的一些评论）关于使用clip属性的想法，并制作了这个
http://jsfiddle.net/Keyamoon/Uem9w/31/
（点击并按住图片。我使用了活动状态）
动画流畅，HTML更简洁。
是的，这个更简洁。
我尝试使用jquery animate来实现这一点，但由于元素的“background-position”属性在jQuery中不被视为整数，所以它无法正常工作。当然，CSS3太棒了 :)
嘿，Chris，有没有想过制作视频教程！！！！
目前任何仅使用CSS的方案（除了Webkit，在那里你可以设置动画队列，如果我没记错的话）的问题是，z-index永远不会完全正确。
如果所有9个元素都以相同的z-index开始，那么当z-index在动画退出时发生变化时，第一个元素将覆盖其他元素，但在动画返回时将恢复。
我发现的一个快速修复方法是在悬停时更改z-index，因为用户很可能不会将鼠标移出相同的元素（尽管我怀疑这也取决于动画的速度）……leFiddle
我非常确定你可以使用带有BG图像的div并使用background-position来创建一个不错的版本，但是，在保持background position固定在顶部/中间/底部和左侧/中心/右侧的同时，对width/height/top/left进行动画处理。
不过，它仍然不如剪辑IMG标签的方法易于设置。
您可以使用带有背景图像的div *并*剪辑div而不是IMG。
我的处理方法是在每次点击时通过 JavaScript 将 z-index 向上递增。因此，最近点击的元素始终具有最高的 z-index。
我不太喜欢你处理 z-index 的方式。
为什么不直接添加一个 CSS ".active { z-index: 1; }"，并且永远不要直接定位 z-index 呢？每次点击时，你都会添加 active 类，所以它应该“差别不大”。
你是出于某种特定目的这么做的吗？
因为当再次点击时需要移除 .active 类，这会立即移除较高的 z-index。而实际上，它需要保留较高的 z-index 一段时间（直到过渡结束）。据我所知，没有办法延迟类似的事情（比如 JavaScript 中的回调函数）。
我非常喜欢这个想法！太棒了！！9 张不同图片的缩略图组成了一张完整的图片 :)
我已经尝试过做这个效果了
没有使用 JS ;-) 纯 CSS 的魅力
在 Chrome 上测试过，只是为了看看我是否可以在任何浏览器中使其工作 - 如果您想改进它以适用于其他浏览器，请随时改进。
我发现动画运行更流畅 ;-)
http://jsfiddle.net/stryju/f2ESq/
http://jsfiddle.net/stryju/f2ESq/embedded/result/
获得最佳观看体验 :-P
很棒的概念，只有 WebKit 浏览器会出现一些卡顿。
看起来像一个拼图……但是很棒 :)
很棒的作品 :_)
它只在 Chrome 中有效
不正确。
框架（背景）可以是黑色或白色。
你尝试过使用 jQuery 吗？非常适合这种情况 :)
Chris，你的作品很棒，但那些插图呢？我惊呆了。
d。
这太疯狂了…
这是一个纯 CSS 解决方案的版本，适用于 Chrome、Firefox 和 IE9（没有动画）。
http://jsfiddle.net/J66jp/1/
也许有些人可以看看我的解决方案并解释为什么我必须加载背景图像并在 :checked 上将背景位置设置为 0 0。仅仅更改大小和位置不起作用。
如果使用“background-position”，则可以正常工作。
谢谢。你说得对，这在规则 #r1c2:checked + label 和其余使用 id 的地方有效！我仍然不明白为什么它在规则 input[type="checkbox"]:checked + label 中不起作用。
http://jsfiddle.net/J66jp/14/
通过使用 .row1.col2 设置背景，我可以使用 input[type="checkbox"]:checked + label 更改背景位置。
如果我使用 #r1c2 + label 设置背景，那么我必须使用 #r1c2:checked + label 来更改背景位置，即使其他属性是使用 input[type="checkbox"]:checked + label 更改的。
很棒的作品，让我想着在你的网站上创建一个部分，让人们将你的优秀教程付诸实践……你提出一个挑战，他们必须在 Chrome、FF 和 Safari 中使其工作才能被接受……也许偶尔还会举办一个比赛，赠送那些很棒的免费 T 恤，嗯？:-)
很棒的艺术和代码，Chris……你太棒了！
这才是酷！干得漂亮，先生。
在 IE 9 上运行良好。非常酷！
很多客户希望找到 Flash 的替代方案，因为发展中国家 ADSL 的总体速度仍然存在问题。这真是太棒了！现在浏览器只需要跟上步伐了。
非同凡响！
你真是个程序员
Chris，非常感谢，
它看起来很棒！
Pekta
（这9张图片的作者）