0

虽然我们可以通过 jQuery 等各种 Javascript 库来实现出色的动画效果。我想知道动画背后的技术是什么？

我可以考虑使用 CSS 来格式化页面元素。

但是我们怎样才能在页面的任意位置放置一个元素呢？我的意思是，不是按线。我们真的可以将浏览器窗口中的客户区视为画布吗？

我对前端 Web 开发完全陌生，我希望我说清楚了。感谢您回答这个初级问题。

4

1 回答 1

3

jQuery 方式 - 也是唯一的跨浏览器方式 - 动画是设置一些 CSS 属性，稍等，更新这些属性，稍等，更新这些属性......

e.style.position = "absolute";
time_start = Date.now();
time_end = time_start + 10000;

(function tick(){
  now = Date.now() - time_start;
  if(now > time_end) now = time_end;
  e.style.top = now * speed + top_start;
  if(now < time_end) setTimeout(tick, 13);
}();

您感兴趣的 CSS 属性是：

  • position: absolute允许您将元素定位到任意位置。
  • display: blockordisplay: inline-block让一个元素有一个width和height
  • top, left, bottom,right定义元素位置，如果它position是absolute或relative。left优先于right和top优先于bottom。
  • width并height定义元素的大小。

  • opacity可以动画淡入或淡出元素。

  • padding, border-width,margin和它们各自的组件都可以动画。

您还可以为颜色设置动画：border-color、color、background。

于 2012-10-24T11:33:02.480 回答