儿童基金会网络动画

Question

有人能告诉我任何关于这网站上的栅极动画和缩放页面转换的信息吗?我想尝试制作这个很酷的动画。至少给我“关键字”如何找到它。那些是用html5做的吗？

Answer 1

在Unicef动画中，开发人员使用JavaScript的混合方法，使用GSAP、JS库和CSS转换。

您可以使用Chrome工具查看它们在bundle.js和screen.css文件中的代码。

一般来说，您可以使用：

• CSS关键帧动画
• CSS过渡
• JavaScript香草或一些图书馆
• Web动画API

若要在HTML页面中动画DOM元素，请执行以下操作。

为了帮助您开始工作，我使用CSS关键帧动画创建了一个简单的缩放效果，但是您可以使用JavaScript库达到类似的效果，如jQuery、GSAP、have或其他。

对于更复杂的动画，我建议使用一个专门的JS库作为GSAP，如果您需要更简单、更吸引眼球的动画，您也可以考虑使用一些预先制作的效果：

• animate.css (CSS关键帧动画)
• animatelo.js (网络动画API) -否认我创建了这个库:)

这真的取决于你动画的复杂性和你的技能。

​

#mario {
  background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
  background-repeat: no-repeat;
  width: 375px;
  height: 375px;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: leaves 5s ease-in-out infinite alternate;
  animation: marioAnim 5s ease-in-out infinite alternate;
}

@-webkit-keyframes marioAnim {
  0% {
    -webkit-transform: scale(1.0);
  }
  100% {
    -webkit-transform: scale(2.0);
  }
}

@keyframes leaves {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(2.0);
  }
}

<div id="mario"></div>

​