Question

有人可以告诉我关于门动画和从this Unicef网页转换页面的任何信息，我想尝试制作这个很酷的动画。至少给我“关键字”如何找到它。是用html5制作的吗？

Answer 1

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

您可以使用Chrome开发者工具查看bundle.js和screen.css文件中的代码。

通常你可以使用：

CSS关键帧动画
CSS Transitions
JavaScript vanilla或某些库
网络动画API

为HTML页面中的DOM元素设置动画。

为了帮助您入门我使用CSS Keyframe Animation创建了一个简单的缩放/缩放效果，但您可以使用jQuery，GSAP，Velocity等JavaScript库达到类似的效果。

对于更复杂的动画，我建议使用专门的JS库作为GSAP，如果你需要更简单的眼睛捕捉动画，你可以考虑使用一些预先制作的效果：

animate.css（CSS关键帧动画）
animatelo.js（网页动画API） - 声称我已创建此库：）

这实际上取决于动画的复杂程度和技能。

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

联合国儿童基金会网络动画

1 个答案: