鼠标|HTML 2d缩放案例代码讲解

鼠标|HTML 2d缩放案例代码讲解

文章图片

鼠标|HTML 2d缩放案例代码讲解

文章图片

鼠标|HTML 2d缩放案例代码讲解

文章图片

【鼠标|HTML 2d缩放案例代码讲解】鼠标|HTML 2d缩放案例代码讲解

文章图片

鼠标|HTML 2d缩放案例代码讲解

上节课我们已经学习了关于2d缩放的相关知识 , 今天我们通过两个案例来加深对2d缩放的了解 。
1.图片放大案例:实现的效果:当鼠标经过图片时 , 图片放大 。
第一步 , 首先一个高度和宽度为200像素的div盒子 , 设置边框如下:

第二步 , 我们在div中放置一个带有链接的图片:

第三步 , 当鼠标经过图片时 , 设置放大效果:

第四步 , 在进行图片的缩放时 , 我们会发现 , 图片会溢出来 , 因此我们设置溢出隐藏效果:

2.分页按钮案例:实现的效果:当鼠标经过页面的时候 , 数字放大 。

第一步 , 首先新建6个带有链接的li标签:

第二步 , 将li标签设置宽度、高度以及圆角边框 , 以及居中对齐

第三步 , 将li标签设置左浮动 , 一排显示:

第四步 , 当鼠标经过li标签图片进行放大显示

我们已经讲2d转换已经讲解完了 , 接下来会将关于动画的相关知识 。