用几行简单的代码实现上下跳动的效果：
html部分 (我就先放了一张图片)
1. <div class="goods">
2. <img src="images/box1.png" />
3. </div>css部分：
1. * {
2. margin: 0;
3. padding: 0;
4. }
5.
6. img {
7. display: inline-block;
8. }
9.
10. .goods {
11. width: 50%;
12. text-align: center;
13. margin: 50px auto;
14. }
15.
16. .goods img {
17. animation: myfirst 2s infinite;
18. }
19.
20. @keyframes myfirst {
21. 0% {
22. transform: translate(0px, 0px);
23. }
24. 50% {
25. transform: translate(0px, -10px);
26. }
27. 100% {
28. transform: translate(0px, 0px);
29. }
30. }就这几行 就简单的搞定啦~
然后说一下实现的原理吧：
这个效果用的是css3动画
我们可以用 @keyframes 规则来创建动画，你可以用百分比来规定变化发生的时间（如：0%，25%，50%，100%），或用关键词 "from" 和 "to"，等同于 0% 和 100%。
设置完动画我们需要将动画绑定到我们要实现动画的元素上去。我这个例子中，就是绑定到 .good img上 用“animation: myfirst 2s infinite;” 第一个元素值代表的是动画的名称，第二个是动画的时长，第三个表示的是动画执行的次数 infinite 表示无限次循环。
