芳草地

马黑黑

花潮论坛lrc在线

00:00 | 00:00

马黑黑

种了一棵树，完美融合。这棵树，在归去来兮的荒野也种有。

马黑黑

小鸟水中的倒影，逼真的有点夸张，虽然加入了模糊滤镜。这不是 -webkit-box-reflect 做的，是用了元素：

#bird {
        position: absolute;
        width: 176px;
        height: 156px;
        background: transparent url('https://638183.freep.cn/638183/Pic/81/bird3.gif') no-repeat;
}

#bird::after {
        content:"";
        background-image: inherit;
        width: 100%;
        height:100%;
        position: absolute;
        bottom:-160%;
        filter: blur(1px);
        transform:scaleY(-1);
}

transform:scaleY(-1); 一句，将盒子伪元素的背景图片朝垂直方向与原图倒转。

红影

树是用了滤镜的混合模式，还混得挺协调。
最惊艳的是鸟的倒影，太漂亮了，特别像图图原本就有倒影似的

红影

马黑黑 发表于 2022-9-28 07:43
小鸟水中的倒影，逼真的有点夸张，虽然加入了模糊滤镜。这不是 -webkit-box-reflect 做的，是用了元素：

...

bottom:-160%; 这个设置挺难想象的。

红影

黑黑又带来新效果

马黑黑

红影 发表于 2022-9-28 10:07
黑黑又带来新效果

新不新，做的挺用心

马黑黑

红影 发表于 2022-9-28 10:05
bottom:-160%; 这个设置挺难想象的。

那不一样吗？top可是这么设置，针对的是顶边（0在最顶边）；bottom针对的是底边（0在最底边）。

马黑黑

红影 发表于 2022-9-28 10:03
树是用了滤镜的混合模式，还混得挺协调。
最惊艳的是鸟的倒影，太漂亮了，特别像图图原本就有倒影似的{:4_ ...

这个做法，可以考虑做一个猪八戒照镜子

小辣椒

这个效果有点惊艳的，黑黑这颗树种的让人千万种遐想，还想再这颗树下捡一块石头

小辣椒

这歌词绝对同步，真的太完美了

小辣椒

倒影可以这样做出来，真的太惊奇的

马黑黑

小辣椒 发表于 2022-9-28 12:37
倒影可以这样做出来，真的太惊奇的

CSS还是很厉害的

加林森

来学习。头还没有我去清醒。先看看。

红影

马黑黑 发表于 2022-9-28 12:20
那不一样吗？top可是这么设置，针对的是顶边（0在最顶边）；bottom针对的是底边（0在最底边）。

bottom的正值是往上移动，负值是往下吧，是针对的height: 156px的底边么？-160%就是从鸟儿图片的底部向下249.6px吧，从底图中心向下327.6

红影

马黑黑 发表于 2022-9-28 12:21
这个做法，可以考虑做一个猪八戒照镜子

还没想好能做什么，但这个绝对好玩

红影

马黑黑 发表于 2022-9-28 12:19
新不新，做的挺用心

用心制作的都漂亮

马黑黑

醉美水芙蓉 发表于 2022-9-28 17:33
欣赏黑黑老师精美的特效音画！

感谢支持

马黑黑

红影 发表于 2022-9-28 16:03
用心制作的都漂亮

不漂亮也漂亮