<分区>
我对今天在 xkcd 上找到的 3D 网络漫画感到惊讶。 .他会怎么做?是否需要手动重做每一部漫画,或者是否有某种方法可以使其自动化?
编辑
3D 漫画仍可在 http://xk3d.xkcd.com 上获得
标签 javascript html css 3d
<分区>
我对今天在 xkcd 上找到的 3D 网络漫画感到惊讶。 .他会怎么做?是否需要手动重做每一部漫画,或者是否有某种方法可以使其自动化?
3D 漫画仍可在 http://xk3d.xkcd.com 上获得
最佳答案
每个图像都被分成多个层 - 每个层都是自己的 PNG 文件,并且包含很多透明度。
所有这些图像都嵌套在 <div>
中:
<div id="comic">
<!-- style attributes omitted -->
<img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_bike.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_girl.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_mask.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_desk_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_guy.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_text.png" >
</div>
... <div id="comic">
相对定位(或更重要的是,非静态定位)并且每个图像都在其中绝对定位,并重新调整大小。当您移动鼠标时,会进行一些密集的数字运算以重新计算 top
的新值。和 left
每个图像的 CSS 属性。
我在我的网站上写了更多关于它的文章,并解释了如何从头开始构建您自己的简化版本:http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d
然而,将每张图片分成几层是自动的,并有一个(愚人节笑话?)呼吁志愿者让它变得更好。
关于javascript - xkcd 是如何做 xk3d 的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5514506/