css图片滑过定位闪烁

1年前 (2023-09-06)阅读82回复0
郝甜甜
郝甜甜
  • 注册排名10011
  • 经验值0
  • 级别
  • 主题0
  • 回复0
楼主

在网页设计中经常会有需要让图片在鼠标滑过时有一个定位闪烁的效果,这种效果可以通过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中对应的定位数值来调整图片的晃动程度。

本文可能转载于网络公开资源,如果侵犯您的权益,请联系我们删除。

本文地址:https://www.pyask.cn/info/1438.html

0
回帖

css图片滑过定位闪烁 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息