HTML CSS 实现鼠标悬停时图片拉近效果
2021-04-26 14:26
阅读:398
YPE html>
前言
为了让网页的使用体验更好,我们会让网页的某些元素对鼠标的动作做出响应。例如鼠标滑过、单击按钮的时候按钮变色、变形。之前在很多网页上看到了鼠标滑过一个图片链接时图片放大、拉近的效果,今天尝试实现一下。
1. 使用background实现
思路:设置以图片作为
div
元素的背景,鼠标滑过div
的时候通过background
属性放大图片。
background实现图片拉近效果
2. 使用img
元素的width
height
属性实现
思路:当鼠标滑过图片时,修改
img
元素的width
和height
属性放大图片
img图片拉近效果
3. 使用transform
放大图片
transform实现图片拉近效果
4. 使用transform
和transition
来放大图片
以上的3种实现方式中,图片放大过程几乎都是瞬间完成的,感觉不流畅,视觉体验也不好。同
transition
可以设置放大过程经历的时间,从而有流畅的感觉。
transform、transform实现图片拉近
上面这种方式,图片放大过程是流畅的,但是缩小过程很生硬,可以改进一下。
transform、transform 图片拉近 优化
后语
实验的时候发现很多知识有点模糊了,该补习了。
在线DEMO https://hgy9473.github.io/myl...
评论
亲,登录后才可以留言!