域名申请后怎么建网站,wordpress ip设置,php之wordpress,烟台城乡建设住建局网站在css3的学习中#xff0c;我们会经常做一些小的动画效果#xff0c;这感觉非常有趣#xff0c;所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果#xff0c;有兴趣的小伙伴可以看一下。我们都知道css3中增加了一个transform属性应用于元素的2D或3D转换我们会经常做一些小的动画效果这感觉非常有趣所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果有兴趣的小伙伴可以看一下。我们都知道css3中增加了一个transform属性应用于元素的2D或3D转换transform属性允许我们对元素进行旋转、缩放、移动或倾斜。所以对于css3实现图片放大是需要用到transform属性的下面我们就来看看css3使用transform属性实现图片放大的效果。第一种css3实现当我们把鼠标放到图片上图片放大并且超出部分不隐藏的效果.enlarge{width: 300px;height: 300px;border: 1px #ffffff solid;}.enlarge img{width: 100%;height: 100%;cursor: pointer;transition: all 0.6s;-ms-transition: all 0.8s;}.enlarge img:hover{transform: scale(1.2);-ms-transform: scale(1.2);} css3实现鼠标放上图片放大的效果前后对比如下第二种css3实现当我们把鼠标放到图片上图片放大并且超出部分隐藏的效果.enlarge{width: 300px;height: 300px;overflow: hidden;border: 1px #ffffff solid;}.enlarge img{width: 100%;height: 100%;cursor: pointer;transition: all 0.6s;-ms-transition: all 0.8s;}.enlarge img:hover{transform: scale(1.3);-ms-transform: scale(1.3);} css3实现鼠标放上图片放大的效果前后对比如下说明对于上述的两种css3实现图片放大的情况都用到了:hover伪类表示了鼠标悬停时候的状态这样当我们把鼠标放到图片上的时候就会让图片放大当鼠标移除图片就会恢复原有的大小。以上就是本篇文章的全部内容了关于css3中的transform属性更详细的用法大家可以参考css3学习手册进一步的了解。
