红影 发表于 2024-1-24 11:11

《情狐》（学习黑黑地狱少女效果）

<style>
#mydiv { position: relative; margin: 70px 0 0 calc(50% - 561px); width: 960px; height: 600px; background: url('https://pic.imgdb.cn/item/65b07c1b871b83018a1e8a09.jpg') no-repeat center/cover; box-shadow: 4px 4px 12px #333; overflow: hidden; cursor:pointer; --x0: 0; }
#mydiv::before { position: absolute; left:10px; top: 30px;content: ''; width: 693px; height: 390px; background: url('https://pic.imgdb.cn/item/65b07c60871b83018a1f3e37.jpg') no-repeat center/cover; mix-blend-mode: luminosity;
clip-path: polygon(0 var(--x0), calc(var(--x0) + var(--x0)) 0, 100% var(--x0), 100% calc(100% - var(--x0)), calc(var(--x0) + var(--x0)) 100%,0 calc(100% - var(--x0))); transition: all .6s; }
#mydiv:hover::before { mix-blend-mode: unset; transform: scale(.6) translate(-220px,-160px); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: screen; clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%); pointer-events: none; }
</style>

<div id="mydiv" title="播放/暂停">
        <audio id="aud" src="https://mp3.t57.cn:7087/kwlink_d.php?id=25249088" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417fd483ea3.mp4" loop></video>
</div>

<script>
(function() {
        let step = 1, x0 = 0 , change = true;
        let mState = () => aud.paused ? vid.pause() : vid.play();
        let clipBg = () => {
                if(!change) return;
                x0 += step;
                if(x0 > 100 || x0 < 0) {
                        step = -step;
                        change = false;
                        setTimeout( () => change = true, 2000);
                }
                mydiv.style.setProperty('--x0', x0 + '%');
        };
        mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('timeupdate', clipBg, false);
})();
</script>

红影 发表于 2024-1-24 11:14

我也来试验一下剪切的奇妙效果。这个剪成了六边形。本来还试验了一个包含12个点的大十字，发现基本没什么特别变化，还是点数少点的好看，比如八个点六个点的，感觉更好看@马黑黑 {:4_187:}

红影 发表于 2024-1-24 11:47

等空了我也去试试其他点数的剪切，肯定都很好玩{:4_173:}

红影 发表于 2024-1-24 11:51

mix-blend-mode: luminosity 亮度模式。式能够使用“混合色”颜色的亮度值进行着色，而保持“基色”颜色的饱和度和色相数值不变。
做了帖子才发现，这个混合对这白色的狐狸真是合适呢。而且背景中的别的没有，印章透过来了。好神奇啊。这样就会跟背景色结合得很好，那么图形变化时才不那么突兀，做帖子了，更发现黑黑设计里的讲究{:4_199:}

起个网名好难 发表于 2024-1-24 12:28

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

酷我上有《情狐》原唱的版本

马黑黑 发表于 2024-1-24 12:29

红影 发表于 2024-1-24 11:14
我也来试验一下剪切的奇妙效果。这个剪成了六边形。本来还试验了一个包含12个点的大十字，发现基本没什么特 ...

奇思妙想{:4_199:}

红影 发表于 2024-1-24 12:40

起个网名好难 发表于 2024-1-24 12:28
酷我上有《情狐》原唱的版本

太好了，我正愁网易云上没原版，只能拿个翻唱的来。
酷我上的怎么分享地址，我不会啊{:4_173:}

红影 发表于 2024-1-24 12:41

马黑黑 发表于 2024-1-24 12:29
奇思妙想

黑黑的设计太棒了，每次都是去做帖子，才更能体会到设计里的精妙呢。黑黑厉害{:4_199:}

马黑黑 发表于 2024-1-24 12:42

红影 发表于 2024-1-24 12:41
黑黑的设计太棒了，每次都是去做帖子，才更能体会到设计里的精妙呢。黑黑厉害

数学没补考过

起个网名好难 发表于 2024-1-24 12:50

红影 发表于 2024-1-24 12:40
太好了，我正愁网易云上没原版，只能拿个翻唱的来。
酷我上的怎么分享地址，我不会啊

https://mp3.t57.cn:7087/kwlink_d.php?id=25249088

情狐 - 花僮 (Ruby)
词：张北北
曲：张北北
编曲：王中易/高胜
混音：王中易/高胜
母带：李飞
千年的等待
只为今世的遇见
红尘中的回眸
是落寞的起点
修炼几千年
深藏几许的情缘
尘世度劫只为
凝心中的莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
千年的等待
只为今世的遇见
红尘中的回眸
是落寞的起点
修炼几千年
深藏几许的情缘
尘世度劫只为
凝心中的莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲
我是千年的狐仙
化身转世等情缘
一颦一笑炫秋水
一姿一态醉春山
我是千年的狐仙
陷入红尘的执念
一场素来的无缘
愿做佛前一只莲

亦是金 发表于 2024-1-24 13:00

本帖最后由 亦是金 于 2024-1-24 13:01 编辑 <br /><br /><div class="quote"><blockquote><font size="2"><a href="forum.php?mod=redirect&amp;goto=findpost&amp;pid=2045769&amp;ptid=73804" target="_blank"><font color="#999999">红影 发表于 2024-1-24 12:40</font></a></font><br>太好了，我正愁网易云上没原版，只能拿个翻唱的来。<br>酷我上的怎么分享地址，我不会啊</blockquote></div><br>情狐_花僮<br><a href="http://www.kuwo.cn/play_detail/25249088" target="_blank">http://www.kuwo.cn/play_detail/25249088</a><br><br>https://www.qqmc.com/mp3/music25249088.mp3&nbsp; &nbsp; （320K）<br>https://www.qqmc.com/up/kwlink.php?id=25249088&amp;.mp3&nbsp;（320K）<br><a href="https://www.qqmc.com/up/kwlink.php?id=25249088" target="_blank">https://www.qqmc.com/up/kwlink.php?id=25249088</a>&nbsp; &nbsp;（320K）

红影 发表于 2024-1-24 13:29

马黑黑 发表于 2024-1-24 12:42
数学没补考过

补考两字根本不算事啊，你看还好多都没毕业证就跑了，一样风生水起的{:4_173:}

红影 发表于 2024-1-24 13:31

起个网名好难 发表于 2024-1-24 12:50
https://mp3.t57.cn:7087/kwlink_d.php?id=25249088

情狐 - 花僮 (Ruby)


谢谢难难，还有歌词啊，嗯嗯，我去试试把歌词加进去{:4_187:}

红影 发表于 2024-1-24 13:33

亦是金 发表于 2024-1-24 13:00
本帖最后由 亦是金 于 2024-1-24 13:01 编辑 红影 发表于 2024-1-24 12:40太好了，我正愁网易云上没原版， ...

酷我的歌曲有这么多的分享方法啊，还从来不知道呢。谢谢亦是金老师{:4_199:}

樵歌 发表于 2024-1-24 15:30

这个狐狸精好淑女的样纸。{:4_173:}

樵歌 发表于 2024-1-24 15:31

真厉害，师妹啥都能学会。{:4_187:}

亦是金 发表于 2024-1-24 16:42

红影 发表于 2024-1-24 13:33
酷我的歌曲有这么多的分享方法啊，还从来不知道呢。谢谢亦是金老师

{:4_187:}

马黑黑 发表于 2024-1-24 17:40

红影 发表于 2024-1-24 13:29
补考两字根本不算事啊，你看还好多都没毕业证就跑了，一样风生水起的

那样挺好

红影 发表于 2024-1-24 19:48

樵歌 发表于 2024-1-24 15:30
这个狐狸精好淑女的样纸。

狐狸变的美女都很美的啊{:4_173:}

红影 发表于 2024-1-24 19:49

樵歌 发表于 2024-1-24 15:31
真厉害，师妹啥都能学会。

跟在后面学很简单的，师兄若是去学了，肯定做得更好呢{:4_187:}
页: [1] 2 3 4
查看完整版本: 《情狐》（学习黑黑地狱少女效果）