请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-8-11 22:04 编辑
JS 的 cloneNode 方法可以将一个元素及其所有内容克隆到目标元素，我们可以借此制作兼容性较好的倒影效果。请看以下代码：
<style>
#mydiv {
width: 232px;
height: 172px;
}
#rbox {
width: 200px;
top: 100px;
transform: translate(0,100px) scale(1, -1);
-webkit-mask: linear-gradient(to bottom, transparent, red);
}
</style>
<div id="mydiv"><img alt="" src="https://638183.freep.cn/638183/t22/webp/bird5.gif" /></div>
<div id="rbox"></div>
这组代码，id="mydiv" 的元素带有一个 img 子元素，id="rbox" 的元素没有任何内容，二者的CSS设置里尺寸相同，#rbox 有额外的设置：Y轴倒转+透明度设置。然后我们通过如下 JS 代码将 mydiv 元素的内容完整复制到 rbox 元素中：
<script>
let node = document.getElementById('mydiv').cloneNode(true);
rbox.appendChild(node);
</script>
最终效果如下：
本例，我们仅通过设置目标元素的 opacity 就能模拟出倒影，也许不够逼真，但已经很不错了。其实我们还有其他手段，诸如 blur 滤镜、mask 遮罩等等，利用好它们，再辅以合适的场景，营造出更为逼真的倒影效果并不是什么难事。
| 
发表于 2023-8-11 22:01
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-8-12 06:21
发表于 2023-8-12 09:06
喝咖啡
小白尽量理解中。。。碰到代码我慢好几拍，容我慢慢想。。