css3图片放大时间轴，css如何让图片放大不变形

用css的a:hoverimg放大图片时怎么让放大后的图片从原图片的中心放大

要实现鼠标放在block上以中心为原点进行放大，可以利用CSS3的transform和transition来实现 CSS3的transform： scale()可以按比例放大或缩小block的功能。

这位网友你好，百度图片鼠标放上去放大的效果用的是css3的新属性，如下图。但是现在一些低版本的浏览器并不支持，有些浏览器需要加特有的前缀（百度中可以看红框中的代码）。

如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red，green，blue，opacity)来对背景色进行设置，这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。

/div如果希望鼠标经过时图片的尺寸变成600*450，那么在css里面只要这样定义就行了：picimg：hover{width：600px；height：450px} 这个代码在ie6下会不生效，因为ie6不支持除A标签外的其他元素的：hover伪类。

相关问答

Q1: css3使用animation让页面加载进来时图片从中心放大

1、关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。

2、今天要分享的案例是将动画做成圆形的形状来加载页面，在使用动画时要注意浏览器兼容问题知识点详解（1）animation：设置动画属性animation-name ：设置需要绑定到选择器的 keyframe 名称。

3、这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。css3 animation属性作用：animation 属性是一个简写属性，用于设置六个动画属性。

4、下载 您可以狠狠地点击这里：ie-csshtc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。

5、如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red，green，blue，opacity)来对背景色进行设置，这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。

6、Transform动画属性transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

Q2: css3鼠标移入特效:如何实现div颜色渐变和放大缩小的效果

background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。

首先，打开html编辑器，新建html文件，例如：index.html。

CSS3里面的线性渐变：linear-gradient 语法 参数 第一个参数：指定渐变方向，可以用“角度”的关键词或“英文”来表示：第一个参数省略时，默认为“180deg”，等同于“to bottom”。

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

Q3: css如何实现鼠标滑过缩略图时放大图片

要实现鼠标放在block上以中心为原点进行放大，可以利用CSS3的transform和transition来实现 CSS3的transform： scale()可以按比例放大或缩小block的功能。

首先，打开html编辑器，新建html文件，例如：index.html。

用js，先是一个小图片（缩略图），onMouseOver时触发js写的Function，当然Function中是处理方法。这只是简单思路，至于怎么写网上有很多类似的代码可以供你copy了，自己找找。

preview开始是不可见的，.css()为图片指定了位置，.fadeIn()最终显示预览图片。当光标离开图片时，将添加的预览图片使用remove()方法移除。

当鼠标在原图上移动时，通过对大图进行绝对定位来显示对应的部位，实现类似放大镜的效果。【图片加载】程序初始化时会先执行_initLoad程序，主要用来载入图片。由于img在载入之前获取尺寸是不准确的，所以相关参数的计算都要等到图片加载之后。

关于css3图片放大时间轴和css如何让图片放大不变形的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。