CSS实现页面图片放大

CSS实现页面图片放大

Scroll Down

在博客里面,想实现文章页面的图片点击自动放大,之前看了lightbox2但是一直没搞定(本人没有编程基础),因此,使用了css实现图片放大!

具体效果如下图:

73771409_p0_master1200.jpg

上面的效果是已经搞定,lightbox2和css的效果。开始鼠标移上去放大是css,然后点击图片放大是lightbox2。

lightbox2的教程地址:《lightbox2实现页面图片点击放大》

我们看一样CSS怎么做到的:

很简单我们只需要在,图片的css上面加入下面的控制就可以了。

img
{
    z-index: 1000;                //设置为最顶层,以免左侧导航栏遮挡
    position: relative;
    cursor: pointer;              //鼠标样式:手势
    transition: all 1.2s;         //放大的时间:1.2s
}

img:hover {
    transform: scale(1.05);      //放大倍数:1.05倍
}

image.png

下面是相关css详细讲解

1、cursor

描述
url需使用的自定义光标的 URL
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标
default默认光标(通常是一个箭头)
auto默认。浏览器设置的光标
crosshair光标呈现为十字线
pointer光标呈现为指示链接的指针(一只手)
move此光标指示某对象可被移动
e-resize此光标指示矩形框的边缘可被向右(东)移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)
n-resize此光标指示矩形框的边缘可被向上(北)移动
se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)
s-resize此光标指示矩形框的边缘可被向下移动(北/西)
w-resize此光标指示矩形框的边缘可被向左移动(西)
text此光标指示文本
wait此光标指示程序正忙(通常是一只表或沙漏)
help此光标指示可用的帮助(通常是一个问号或一个气球)

将鼠标移动到这些字上改变鼠标样式cursor.

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait

2、transition

transition 属性设置元素当过渡效果,四个简写属性为:

描述
transition-property指定CSS属性的name,transition效果
transition-durationtransition效果需要指定多少秒或毫秒才能完成
transition-timing-function指定transition效果的转速曲线
transition-delay定义transition效果开始的时候

详细的可以看:《CSS3 transition介绍》

3、transform

transform: none|transform-functions;

描述
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 转换元素定义透视视图

详细的可以看:《CSS3 transform介绍》