我有这个.png,我想让它在每次检测到滚动运动时弹跳一点,但我不擅长javascript和css。希望大家能够帮助我
<div class="arrownav bounce">
<a href="" class="logo">
<img src="{{ asset('assets/img/arrow down.png') }}" height="45">
</a>
</div>
我现在使用CSS使图像反弹
这是代码:
.bounce {
-webkit-animation:bounce 1s infinite;
-moz-animation:bounce 1s infinite;
-o-animation:bounce 1s infinite;
animation:bounce 1s infinite;
}
@-webkit-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
@-moz-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
@-o-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
@keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
我注意到的第一件事是所有@keyframes
中缺少的单元,就在这里:
100% {bottom:30;}
这应该是:
100% { bottom:30px; }
<小时/>
您在动画中使用了 bottom
样式,这非常好,但为了使其正常工作,元素的 position
需要是 相对
、绝对
或固定
(更多here)。
.bounce {
position: relative;
-webkit-animation: bounce 1s infinite;
-moz-animation: bounce 1s infinite;
-o-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
这是一个工作 fiddle .
<小时/>
奖金更改动画中元素位置的另一种方法是使用 transform
样式,而不是使用 bottom
。当您使用transform
时,您不需要position:relative;
。
@keyframes bounce {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(-30px);
}
}
Fiddle
我是一名优秀的程序员,十分优秀!