从页面加载正文内容 - >在页面加载时从左到右

时间:2013-12-16 00:04:39

标签: html css

我正在尝试创建类似于复印机出纸的页面效果。我希望加载时的身体内容从左到右显示。我已经看到很多关于如何使用像图像这样的感性元素但不是整个页面的例子。这是我拼凑在一起的代码示例。我似乎无法得到我正在寻找的左到右效果,这对IE无效。我刚刚开始编写网页编码,所以我们将非常感谢任何帮助。

<html>
<head>
  <style>

    body { padding-left: 5000px; -webkit-transition: all 1s ease; transition: all .5s ease; }

    .loaded { padding-left: 5px; }

  </style>

  <script>function loaded (el) { el.classList.add('loaded') }</script>

</head>
<body onload="loaded(document.body)">
<br><br><br><br><br>

<table class="tftable" border="0" width="400">
  <tr><th></th></tr>
  <tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td></tr>
</table>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

使用该代码可以帮助您将动画放在身体上

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction