Question

我正在寻找有人形容我如何制作这样的动画卡片，就像在链接中一样。我想制作电子贺卡。我搜索了很多，但我仍然是空的，如何使这样一个动画的ECARD。如果有人帮我解决这个问题，我将非常感谢你。谢谢

请访问此处：https://codecanyon.net/item/christmas-card-magic-lights/full_screen_preview/13721494?_ga=2.52809258.348819546.1516316033-509877775.1512146146

这是另一个：https://ihatetomatoes.net/svg-christmas/

Answer 1

CSS非常有用。您可以从那里开始，然后尝试更复杂的东西，如Javascript和JSON，如果您需要更多。例如：

<html>
<head>
<style>
div {
    width: 180px;
    height: 180px;
    background-image: url(man1.gif);
    animation-name: example;
    animation-duration: 4s;
}
@keyframes example {
    0%   {background-image: url(man1.gif);}
    25%  {background-image: url(man2.gif);}
    50%  {background-image: url(man3.gif);}
    75%  {background-image: url(man4.gif);}
    100% {background-image: url(man5.gif);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

这会创建一个5帧动画，但您可以使用您选择的百分比来控制时间。您可以使图像在屏幕上移动，更改大小，重复等。如果将多个动画组合在一起，您可以获得一些非常漂亮的效果。

我建议您查看w3schools.com作为起点。我一直使用该网站（包括获取上面的一些代码）。祝好运。 w3schools - CSS Animations

Answer 2

我强烈推荐Val Head关于CSS动画的课程：

https://www.lynda.com/CSS-tutorials/CSS-Animation/439683-2.html

她涵盖了从基础知识到传统的框架动画到复杂的切割边缘的所有内容。它对我帮助很大。

你可以在Lynda的免费试用限制内加上其他一些课程

使用HTML，JS在Web中制作动画

2 个答案: