快速学会网页中鼠标经过图片放大效果

项目场景：

                    鼠标经过实现图片放大效果

---

效果描述：

---

用到的知识点：

鼠标经过图片放大：

• transform：意思是转换，指的是改变所在元素的外观，例如位移、旋转、缩放等，但是没有动画效果，所以可以搭配transition 使用.
• transition：意思是过渡，CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.
  注意：
         ①哪个盒子要变化，就在哪个盒子里写 transition ;
         ②一般在鼠标经过时（hover ）产生效果，所以在hover里只需要写想要变化的效果就行
  用法：transition: [属性名] [持续时间] [速度曲线] [延迟时间];
  例如：transition: width 5s ease 0.3s;

---

代码：

.p {
    width: 900px;
    height: 345px;
    overflow: hidden;
    /*图片放大时多出来的部分将其隐藏*/
}
.p img {
    height: 345px;
    width: 900px;
    transition: all 2s; 
    /*all表示所有属性都要变化*/
}
img:hover {
    transform: scale(1.3);
    /*对图片进行放大*/
}