请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 遮罩等等,利用好它们,再辅以合适的场景,营造出更为逼真的倒影效果并不是什么难事。
|