CSS技巧：使图像水平加载而不是垂直加载

Question

我正在寻找一个聪明的类似于技巧的解决方案或黑客来制作通常从上到下加载从左到右的图像？

有没有办法做到这一点？

• 我的想法到目前为止：使用旋转90°的图像（在Photoshop或其他东西中）并使用css转换将其旋转回正常并掩盖它或其他东西。 :)到目前为止，这并没有导致任何结果，但也许有人在这里做了一个黑客或诡计？

所以要清楚，我说的是这个简单的事情可能并不简单，甚至可能都不可能。

---

更新：我不知道从哪里开始...这是一个大型图片的示例小提琴应该加载一段时间：http://jsfiddle.net/cfpqw9Lc/

<div class="img-container">
    <div class="img-inner">
        <img src="https://s3.amazonaws.com/f.cl.ly/items/0j0g2N1T2w3X0I3Y3Y3Z/dsc_2107.jpg" alt="Large Cat Image"/>
    </div>
</div>

Answer 1

你可以使用绝对定位和CSS动画来获得一个纯粹的CSS＆＃34; hack。＆＃34;基本上，我们的想法是，您使用div覆盖图像，然后将div设置为图像的动画，使其看起来好像从侧面加载。< / p>

HTML

<div id="parent">
  <div id="child"></div>
  <img src="whatever.jpg"/>
</div>

CSS

#parent {
  width: 500px;
  height: 500px;
  position: relative;
}

#child {
  position: absolute;
  right: 0;
  background-color: white;
  height: 500px;
  -webkit-animation: slider linear 10s;
  animation: slider linear 10s;
}

@-webkit-keyframes slider {
  from {width: 500px;}
  to {width: 0px;}
}

@keyframes slider {
  from {width: 500px;}
  to {width: 0px;}
}

小提琴：http://jsfiddle.net/74c983wr/

编辑：使用相对定位和right:0

更改了幻灯片的方向

现在，问题是，这些图像仍在从上到下加载，需要在运行动画之前完全加载，因此实际上并没有改变它。它所做的就是给用户一种以这种方式加载图像的印象。

此外，这只适用于坚实的背景，但你可能会使用一些z-index技巧来滑动图像本身，而不是滑动它的封面。