马黑黑 发表于 2022-9-30 22:16
总会有所不同的
我是说原图和反射就不一样了，空了我好好试试看。
红影 发表于 2022-9-30 20:27
不知道，只是找个动图做反射玩
挺好的。
红影 发表于 2022-10-1 10:01
我是说原图和反射就不一样了，空了我好好试试看。
当然不一样。这与现实生活中的机制不同：它将图像倒转一下而已，但并能像水井一样映出人面对它的脸，而是顶部呢{:4_170:}
梦油 发表于 2022-10-1 10:09
挺好的。
奔跑的狼，也是人生的拼搏和不甘{:4_173:}
红影 发表于 2022-10-1 11:13
奔跑的狼，也是人生的拼搏和不甘
是的，影子朋友。其实，狼，除了残忍和贪婪以外，还有集体观念，一直独狼不甚可怕，但一遇狼群，那可就凶多吉少了。
马黑黑 发表于 2022-10-1 10:59
当然不一样。这与现实生活中的机制不同：它将图像倒转一下而已，但并能像水井一样映出人面对它的脸，而是 ...
我可能没说明白，我把狼的大小放大了一倍，结果原图没变，倒影变成4个了。
马黑黑 发表于 2022-10-1 10:59
当然不一样。这与现实生活中的机制不同：它将图像倒转一下而已，但并能像水井一样映出人面对它的脸，而是 ...
试了一下，知道了，我是直接改的尺寸，这样修改就让倒影多出来了，要用transform: scale() 修改才行，用这个试了可以了。
<style>
#papa { left: -302px; width: 1200px; height: 675px; background: #ccc url('https://pic1.imgdb.cn/item/6335a5ce16f2c2beb1999159.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#tree { position: absolute; left: 20px; width: 300px; height: 144px; mix-blend-mode: multiply; }
#bird { position: absolute; left: 400px; top: 360px; width: 726px; height: 55px; background: transparent url('https://pic1.imgdb.cn/item/63346e7716f2c2beb18bec2f.gif') no-repeat; }
#bird::after { content:""; background-image: inherit; width: 100%; height:100%; position: absolute; top:-180%; filter: blur(2px); transform:scaleY(-1); }
</style>
<div id="papa">
<img id="tree" src="https://pic1.imgdb.cn/item/63346ddd16f2c2beb18b428b.gif" alt="" />
<div id="bird"></div>
</div>
直接改宽度出来一堆倒影狼{:4_170:}
梦油 发表于 2022-10-1 14:40
是的，影子朋友。其实，狼，除了残忍和贪婪以外，还有集体观念，一直独狼不甚可怕，但一遇狼群，那可就凶 ...
其实狼的身上有很多优良品质，比如坚忍，忠贞，顾家，团结，勇敢等等，很多民族用狼做图腾呢。
红影 发表于 2022-10-1 15:22
其实狼的身上有很多优良品质，比如坚忍，忠贞，顾家，团结，勇敢等等，很多民族用狼做图腾呢。
是的，你把狼的优秀品质诠释得非常准确也很到位。
红影 发表于 2022-10-1 15:14
试了一下，知道了，我是直接改的尺寸，这样修改就让倒影多出来了，要用transform: scale() 修改才行，用 ...
{:4_199:}
红影 发表于 2022-10-1 15:06
我可能没说明白，我把狼的大小放大了一倍，结果原图没变，倒影变成4个了。
嗯，图片是以背景出现的，如果元素的尺寸变大了，图片的背景必须 no-repeat 才行
梦油 发表于 2022-10-1 16:27
是的，你把狼的优秀品质诠释得非常准确也很到位。
想起一句关于怜惜狼的，去搜了一下，原来是古龙书里说的：
暮春三月，羊欢草长；天寒地冻，问谁饲狼
人心怜羊，狼心独怆；天心难测，世情如霜
马黑黑 发表于 2022-10-1 16:43
看到那一大群倒影狼了吧，笑喷我了{:4_173:}
马黑黑 发表于 2022-10-1 16:45
嗯，图片是以背景出现的，如果元素的尺寸变大了，图片的背景必须 no-repeat 才行
嗯嗯，试过后现在明白了{:4_204:}
红影 发表于 2022-10-1 19:36
嗯嗯，试过后现在明白了
非常好
红影 发表于 2022-10-1 19:35
看到那一大群倒影狼了吧，笑喷我了
也很不错
马黑黑 发表于 2022-10-1 20:10
非常好
因为弄错，倒是知道了好多{:4_173:}
马黑黑 发表于 2022-10-1 20:10
也很不错
以后想影射多个的时候倒是可以用上了{:4_173:}