图片倒影怎么做

1. 使用CSS3制作图片倒影

制作图片倒影的最简单方法是使用CSS3。我们可以通过CSS3属性reflection来实现图片倒影。

1.1 设置图片倒影

在CSS中设置图片倒影的代码如下：

img {

    -webkit-box-reflect: below 0px linear-gradient(to bottom, transparent, white); /* Safari 5+, Chrome 31+ */
    box-reflect: below 0px linear-gradient(to bottom, transparent, white); /* Firefox 13+, IE 10+, Opera 18+ */
}

上面的代码中，-webkit-box-reflect和box-reflect分别是Safari/Chrome和Firefox/IE/Opera中用于设置图片倒影的属性。其中below 0px表示倒影距离图片底部的距离，linear-gradient(to bottom, transparent, white)表示我们使用白色线性渐变来制作倒影效果。

1.2 自定义倒影效果

如果我们想自定义倒影效果，可以通过修改linear-gradient中的渐变颜色或者改变below的值来实现。例如，下面的代码使用红色和绿色渐变来制作图片倒影。

img {

    -webkit-box-reflect: below 10px linear-gradient(to bottom, red, green); /* Safari 5+, Chrome 31+ */
    box-reflect: below 10px linear-gradient(to bottom, red, green); /* Firefox 13+, IE 10+, Opera 18+ */
}

2. 使用JavaScript制作图片倒影

除了使用CSS3来制作图片倒影外，我们也可以使用JavaScript来实现这个效果。下面是一个基于JavaScript的图片倒影栗子。

2.1 HTML 代码

我们在HTML中添加一个

var img = document.querySelector("img");

var reflection = document.querySelector("#reflection");
function createReflection() {
    var clone = img.cloneNode(true);
    reflection.appendChild(clone);
}
createReflection();