css实现鼠标划过图片放大或缩小
每个网站上面都会有文章列表，有的是纯文字形式，有的则是图片+文字形式，两种相对而言当然是第二种更受欢迎，但是第二种加载个多个图片，也会导致网页打开速度变慢，大部分网站采用图片懒加载方式或者即使请求方式来减少资源请求量，提高网页加载速度，减少网站成本，比如阿里云采用的是就是模块化加载，比如底部的一些模块并不是访问了页面就会查看到底部，大部分人都会在菜单找到自己想要的功能，然后进入，如果访问到了底部，那么就会加载底部资源。这个简单的说下，我们还是说说关于图片加载动画的问题；
此效果主要是依靠css3的transition属性和transform属性；
我们先上代码，然后说原理，希望大家懂得原理，而不是照搬。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 100px;
height: 80px;
float: left;
margin: 10px;
position: relative;
transition: all .5s;
}
img:hover{
transform:scale(0.9,0.9);;
-ms-transform:scale(0.9,0.9);; /* IE 9 */
-moz-transform:scale(0.9,0.9);; /* Firefox */
-o-transform:scale(0.9,0.9);; /* Opera */
-webkit-transform:scale(0.9,0.9); /* Safari 和 Chrome */
}
</style>
</head>
<body>
<img src="./u=3725256381,2611707352&fm=26&gp=0.jpg" alt="">
<img src="./u=3725256381,2611707352&fm=26&gp=0.jpg" alt="">
<img src="./u=3725256381,2611707352&fm=26&gp=0.jpg" alt="">
<img src="./u=3725256381,2611707352&fm=26&gp=0.jpg" alt="">
<img src="./u=3725256381,2611707352&fm=26&gp=0.jpg" alt="">
<img src="./u=3725256381,2611707352&fm=26&gp=0.jpg" alt="">
</body>
</html>一、transition属性
浏览器支持：Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
定义和用法：transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS 属性的名称
transition-duration：规定完成过渡效果需要多少秒或毫秒。（此属性必须，否则无动画效果）
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。
默认属性：
transition ：all 0 ease 0
二、transform 属性
transform 是旋转div元素
浏览器支持：Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。
定义和用法：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
默认属性：
transform ：none
其他属性：
none | 定义不进行转换。 |
|---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换，只是用 X 轴的值。 |
translateY(y) | 定义转换，只是用 Y 轴的值。 |
translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
scale(x,y) | 定义 2D 缩放转换。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |