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);
    }