如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
css3如何实现鼠标移入到图片上图片放大的效果
来源：互联网
2023-03-16 19:19:08 版权归原作者所有，如有侵权，请联系我们
在写页面时，可以通过css3的transform属性来放大图片。今天css3如何实现鼠标移入到图片上图片放大的效果
工具/原料
- 华硕S14
- window10家庭版
- css3
- html
方法/步骤
在编辑器内新建一个index.html，用来学习今天的内容
在页面body区域新增一个div标签,在div标签内引入一张图片
在style标签内，给div标签和img标签加上基础样式
当时鼠标移入到图片上，使用css3transform属性放大图片，并且在图片标签上加上缓慢变大的效果
在浏览器中打开index.html，鼠标移入到图片，会发现图片缓慢变大
贴一下代码：
!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>
注意事项
- scale后面括号是放大倍数，transition后面的0.5是整个动画完成的事件
- 给个小赞哦~
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
上一篇：HTML教程 label标签的使用 下一篇：如何使用css写一个透明背景
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 433 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)