看一下這樣的效果。這里展示了四張圖片，每一個圖片都有一個倒影。當鼠標旋轉每個圖片的時候倒影會消失，并且把圖片放大顯示。接下來跟著我一起完成這樣的效果制作。

·這里展示了一個空白的HTML模板，來設置一下它的背景顏色。

·bargain設置為邊距為零，內邊距也為零，背景顏色為黑色。

·再添加一個INMAX標簽，添加上圖片。這個圖片當前是沒有任何效果的，就直接的展示出來了。

·給圖片添加一個樣式，設置一個寬度為一百五十像素。這個時候發現這個圖片是靠左上角的，設置一個next布局body。

·再設置一下它的高度為一百，根據這個四口來設置高度，寬度也是。現在就可以把它在窗口的頁面上進行劇終了。

·再來設置一下它的圖片樣式。

·order top left，左上角的圓角設置成十像素，右上角也設置成十像素的圓角。

·這個時候遇到一個關鍵的問題，怎么樣去把設置成一個倒影，增加一個倒影？它有這么一個屬性，這里有設置一下它的倒影，往下的倒影讓倒影離開主要圖片的五個像素的間距，間距也就是這里的縫隙。

·再設置一下顏色，這個顏色來設置一個漸變的，這個時候是空白的，這樣子就產生了這樣的倒影。但是倒影還是太高了一點，可以給透明加一個，如果不夠可以繼續加，這樣子就差不多了，設置成八十暗一點，這樣子就有了一個倒影。

·再設置一下鼠標懸停，懸停是沒有效果的，可以給英美的標簽添加一個鼠標懸停的效果。

·然后是它的放大，放大為一點五倍，這個時候放大縮小是很生硬的，可以在這里加上零點五秒的過渡時間，但倒影還沒有消失，希望它的倒影消失一下。

·可以繼續設置一下屬性，它有一個on set，也就是恢復到默認設置。這個時候再來看一下，再給它添加外發光的效果，這樣就出現了這個效果。

·給元素多復制幾個，這個時候再來看一下，但它是挨在一起的，可以給元素設置一個外邊距，上下為零，左右為十像素，可以設置成五像素。

·這個時候再來看，這個時候會發現后邊的一張圖片會遮住前面的那張圖片，但這不是想要的，可以在over的時候把英美解的元素的層級往上走一下，這樣子設置到最高，就展現到最前面，外發光效果還是太小小了點，這樣子看起來就好看一些。

·如果圖片放大了，最好是把左下角也設置成圓角，也可以這里設置一下。再來看一下，這樣子是不是放大的時候全為圓角了。

今天的展示就到這里，謝謝大家。

<div class="img1 alt=""></div>
<div class="img2 alt=""></div>
...
*{
 padding: 0;
 margin: 0;
}
div{
 display: block;
 width: 500px;
 height: 281px;
 background: url('./600-31080.png');
}

.img2{
 transform: scaleY(-1);
}

.img2:before{
 content: '';
 display: block;
 width: 100%;
 height: 100%;
 transform: scaleY(-1);
 background-image: -webkit-gradient(
 linear, 
 left bottom, 
 left top, 
 color-stop(0.2, rgb(255,255,255)), 
 color-stop(1, rgba(255,255,255,0.3))
 ); 
}

.img2{
 transform: scaleY(-1) skew(-30deg);
 margin-left: 81px;
}

果圖如下：

代碼展示如下：

<style>

    h1 {

        font-size: 50px;

        text-align: center;

        color:slateblue;

        filter: hue-rotate(240deg);

        -webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));

    }

    img{

        filter: hue-rotate(120deg);

        -webkit-box-reflect: right 1px;

    }

</style>

<h1>你看到了什么</h1>

<img src="https://img1.baidu.com/it/u=1964477391,3223175982&fm=26&fmt=auto" alt="" width="200px" >

屬性說明：

filter: hue-rotate(angle)

給圖像應用色相旋轉。“angle”設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。

若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。

-webkit-box-reflect

是webkit內核瀏覽器的一個私有屬性，用來對block(塊級)元素或者行內塊元素（img,input）制作一個鏡像的效果

?? above：指定倒影在對象的上邊

??below：指定倒影在對象的下邊

?? left：指定倒影在對象的左邊

?? right：指定倒影在對象的右邊

?? offset：倒影與對象之間的間隔，可以為負值。