论坛 › 音乐沙龙 › 《故乡的原风景》to庶民（学习黑黑遮罩效果）

红影 发表于 2024-1-14 17:14

《故乡的原风景》to庶民（学习黑黑遮罩效果）

<style>
#papa {
        margin: 80px 0 0 calc(50% - 593px);
        width:1024px;
        height: 575px;
        border: 1px solid gray;
        background: url('https://pic.imgdb.cn/item/65a3743e871b83018ab6bf3c.jpg') no-repeat center/cover;
        box-shadow: 3px 6px 12px #000;
        z-index: 1;
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
}

#papa video { position: absolute; width: 100%; height: 640px; top: -60px; opacity: .35; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 10;}

#tietu1 { position: absolute; z-index: 1;top: 40px; left: 40px; width: 800px; height: 400px; background: url('https://pic.imgdb.cn/item/65a6296a871b83018a15e508.jpg');background-repeat: repeat; background-size: 100% 100%; background-position: 0 0; animation: zhuan 40s infinite linear var(--state);-webkit-mask: url('https://pic.imgdb.cn/item/65a37664871b83018abe80d2.png')repeat-x 0px center/50%; }
@keyframes zhuan {
      to { background-position: -800px 0; }
      
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/6181262/01/28/52/6291f5bac73dc_10s_big.mp4" autoplay loop muted></video>

<div id="tietu1"></div>
</div>

<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        var player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=393685');
        player.setBtnCss(`
                width: 300px;
                bottom: 10px;
                z-index: 10;
                opacity: 1;
                --btnBg: url('https://pic.imgdb.cn/item/659f3988871b83018a7fd22e.png') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: orange;
                --btnSize: 50px;
        `);
        player.setLrcCss('top: 15px; color: tan; --bg: #DAA520; z-index: 9;');
        player.lrcAr = [ , ];
};
</script>

红影 发表于 2024-1-14 17:16

看到庶民在写伊春故乡行，这个就是表现伊春的，那张枫叶后的图图名字是《伊春林都》@庶民 {:4_204:}

红影 发表于 2024-1-14 17:19

本来想让枫叶遮罩不动，让那张森林图在枫叶的遮罩下来回移动。结果用动态去驱动，枫叶跟着图图一起动了，没出现想要的相对运动。只能把森林图换成了动图。@马黑黑{:4_173:}

红影 发表于 2024-1-14 17:20

其实我可以把枫叶做成动的，应该也能一点点展现森林的吧。
嗯，先试验了底图是动的，下次试验遮罩是动的{:4_173:}

梦油 发表于 2024-1-14 17:21

我咋看不到《伊春林都》这几个字啊？

红影 发表于 2024-1-14 17:23

不知道为什么，本地没法看到效果，我用了webkit兼容的。为这折腾了半天，然后放pencilcode里看到了效果。是本地不支持位图遮罩么？@马黑黑

马黑黑 发表于 2024-1-14 18:15

红影 发表于 2024-1-14 17:19
本来想让枫叶遮罩不动，让那张森林图在枫叶的遮罩下来回移动。结果用动态去驱动，枫叶跟着图图一起动了，没 ...

枫叶遮挡的图片是个gif格式，它很怪异，应该重新制作这张图片。

红影 发表于 2024-1-14 19:00

梦油 发表于 2024-1-14 17:21
我咋看不到《伊春林都》这几个字啊？

那张图图找的时候看到是这个名，不是显示在帖子里的{:4_173:}

红影 发表于 2024-1-14 19:02

马黑黑 发表于 2024-1-14 18:15
枫叶遮挡的图片是个gif格式，它很怪异，应该重新制作这张图片。

不用了，下次我尝试让遮罩动，不让底图动了{:4_173:}

岁月·如歌 发表于 2024-1-14 20:00

故乡的原风景，老倭寇的这首音乐俺也喜欢听，还有什么拉网小调等为数不多的歌。

樵歌 发表于 2024-1-14 20:21

很有感觉的图图，特别的符合大东北的风物人情。好意境1

马黑黑 发表于 2024-1-14 21:02

红影 发表于 2024-1-14 19:02
不用了，下次我尝试让遮罩动，不让底图动了

底图是可以动的，看怎么动

马黑黑 发表于 2024-1-14 21:27

红影 发表于 2024-1-14 17:19
本来想让枫叶遮罩不动，让那张森林图在枫叶的遮罩下来回移动。结果用动态去驱动，枫叶跟着图图一起动了，没 ...

可以考虑背景移动

红影 发表于 2024-1-14 23:22

马黑黑 发表于 2024-1-14 18:15
枫叶遮挡的图片是个gif格式，它很怪异，应该重新制作这张图片。

看到黑黑今天的帖子，应该知道怎么让底图动了{:4_173:}

红影 发表于 2024-1-14 23:23

岁月·如歌 发表于 2024-1-14 20:00
故乡的原风景，老倭寇的这首音乐俺也喜欢听，还有什么拉网小调等为数不多的歌。

是啊，音乐不分国界，我也喜欢这首乐曲呢{:4_187:}

红影 发表于 2024-1-14 23:23

樵歌 发表于 2024-1-14 20:21
很有感觉的图图，特别的符合大东北的风物人情。好意境1

想表现一种思乡的情绪，其实最主要的是学习代码呢{:4_173:}

红影 发表于 2024-1-14 23:25

马黑黑 发表于 2024-1-14 21:02
底图是可以动的，看怎么动

但是用translate发现出问题了。{:4_173:}

红影 发表于 2024-1-14 23:27

马黑黑 发表于 2024-1-14 21:27
可以考虑背景移动

嗯嗯，常规的方式是不行了，当然，一起动没问题，错位动还是有讲究的。

醉美水芙蓉 发表于 2024-1-15 07:19

庶民 发表于 2024-1-15 09:23

红影 发表于 2024-1-14 17:16
看到庶民在写伊春故乡行，这个就是表现伊春的，那张枫叶后的图图名字是《伊春林都》@庶民

为你点赞，图片变化中。

查看完整版本: 《故乡的原风景》to庶民（学习黑黑遮罩效果）