css3的积累

1、还是要用到这个东西，因此做些记录。

2、第一个还是transition和transf的搭配应用。比如说一幅图像，hover上去的时候，图像会放大或者缩小。这个时候，思路就是img定义transition，定义好它的四个属性（看手册），然后在img：hover上面定义变化的效果，就是transform，这个transform也有几个属性，其中一个就是scale，就这样进行搭配。代码可以如下：

  img
    {
        width: 30%;
        height:30%;
        transition: 0.5s ease
    }
    
    img:hover
    {
        transform: scale(1.2);
    }

3、从上面的再次延伸一下。主要是对图片的效果，比如hover之前是一个模样，hover以后又是另外一个模样，因此hover之前要定义好图片的transition属性，然后可以加上hover之前的图片其他属性，比如filter，可以是blur，或者是grayscale等属性，意思是图像是模糊的，并且是黑白的，hover了以后，好清晰啊。看代码：

      img
    {
        width: 30%;
        height:30%;
        transition: 2.5s ease;
        filter: grayscale(100%) blur(4px) ;
    }
         img:hover
    {
        transform: scale(1.2);
        filter: grayscale(0%) blur(0px);
    }