手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

css3如何实现鼠标移入到图片上图片放大的效果

时间:2024-10-12 08:35:10

1、在编辑器内新建一个index.html,用来学习今天的内容

css3如何实现鼠标移入到图片上图片放大的效果

2、在页面body区域新增一个div标签,在div标签内引入一张图片

css3如何实现鼠标移入到图片上图片放大的效果

3、在style标签内,给div标签和img标签加上基础样式

css3如何实现鼠标移入到图片上图片放大的效果

4、当时鼠标移入到图片上,使用css3transform属性放大图片,并且在图片标签上加上缓慢变大的效果

css3如何实现鼠标移入到图片上图片放大的效果
css3如何实现鼠标移入到图片上图片放大的效果

5、在浏览器中打开index.html,鼠标移入到图片,会发现图片缓慢变大

css3如何实现鼠标移入到图片上图片放大的效果
css3如何实现鼠标移入到图片上图片放大的效果

6、贴一下代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css3如何实现鼠标移入到图片上图片放大的效果</title> </head> <style> div{ width: 200px; height: 200px; overflow: hidden; } div img{ width: 100%; transition: all 0.5s; } div img:hover{ transform: scale(1.2); } </style> <body> <div> <img src="img.jpg" /> </div> </body></html>

© 手抄报圈