看一下这样的效果。这里展示了四张图片，每一个图片都有一个倒影。当鼠标旋转每个图片的时候倒影会消失，并且把图片放大显示。接下来跟着我一起完成这样的效果制作。

·这里展示了一个空白的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：倒影与对象之间的间隔，可以为负值。