html中怎样设置放大功能,CSS如何设置图片放大效果？

我们浏览网页时，经常可以看到一个效果，当我们把鼠标滑过一张图片或一个区域时，图片会放大或缩小，高亮显示这效果。其实这个效果并不难实现，那么这篇文章 W3Cschool 小编就来教你 CSS 如何设置图片放大效果。

具体效果

思路：图片放大的动画效果还是由​transition​和​transform​实现。先设置 div 的初始位置，过渡的时间等，之后设置 translate，scale，rotate 等属性。

translate：代表水平和垂直的移动；

scale：代表水平和垂直同时缩放；

rotate：表示旋转的角度。

具体代码：

CSS图片放大 - 编程狮(w3cschool.cn)

div {

width: 200px;

height: 100px;

transition: all .3s;

}

div:hover {

transform: translate(100px, 100px) scale(2) rotate(0deg);

}

以上就是 CSS 如何实现图片放大效果的全部内容。更多 CSS 相关教程请关注 W3Cschool 官网。