在网页设计中经常会有需要让图片在鼠标滑过时有一个定位闪烁的效果,这种效果可以通过CSS来实现。
img:hover {
position: relative;
animation: shake 0.8s;
}
@keyframes shake {
0% { top: -5px; left: 5px; }
20% { top: 0px; left: 0px; }
40% { top: -5px; left: -5px; }
60% { top: 0px; left: 0px; }
80% { top: 5px; left: -5px; }
100% { top: 0px; left: 0px; }
}上述CSS代码会使得图片在鼠标滑过时定位出现一个略微的晃动效果。具体来说,当鼠标滑过图片时,CSS会为图片新增一个相对定位的样式,然后调用一个名为shake的动画,该动画会依次修改图片的top和left属性,让图片产生略微晃动的效果。
可以根据实际需求修改动画的时间,以及修改keyframes中对应的定位数值来调整图片的晃动程度。
本文可能转载于网络公开资源,如果侵犯您的权益,请联系我们删除。
0
