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