【黑师代码】潮汐（学习黑师20250822《何西-黑光》竖排歌词效果）
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; margin: 150px 0; left: calc(50% - 81px);width: clamp(600px, 90vw, 1700px); height: auto;--bg: #000 url('https://642303.freep.cn/642303/tu/20250822cx01.webp') no-repeat 30% 20%/100% 100%; --ma-size: 6%; --opacity: 1; }
#pa::before { position: absolute; content: ''; inset: 0; background: url('https://642303.freep.cn/642303/za/feiniao.gif') no-repeat 20% 20%/30% 30%; opacity: var(--opacity); transition: 1.2s; }
#btnFs { bottom: 30px; color: #eee; }
#ma {right:20%;top:60%;opacity: .6;
}
#lrc { right: 40px; top: 40px; color: #333; letter-spacing: 4px; writing-mode: vertical-lr; }
#lrc::before { width: 100%; height: 0; background: url('https://642303.freep.cn/642303/za/xiaobo3_133581705927067500.png') center; background-clip: text; }
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
.pd-vid {
-mask: linear-gradient(to bottom,transparent,red);
-webkit-mask: linear-gradient(to bottom,transparent,red);
opacity: .1;
transform: rotateY(0deg);
mix-blend-mode: hard-light;
}
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=404784312" autoplay loop></audio>
<video class="pd-vid" src="https://bpic.588ku.com/video_listen/588ku_preview/23/09/15/19/06/52/video65043accaa003.mp4" autoplay loop muted></video>
<svg id="ma" class="hue-rotate" viewbox="0 0 400 400"><title>ALT+X</title></svg>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
const dr = Dr.dr(ma);
var path = 'M60 60 A100 100 0 0 1 160 160', tt = 30;
Array.from({length: tt}).forEach((_, k) => {
dr.path( path, 'none', '#D2B48C', 8, 'round').transform(`rotate(${360 / tt * k}, 200, 200)` );
});
audio.onplaying = audio.onpause = () => pa.style.setProperty('--opacity', audio.paused ? '0' : '1');
FS(pa, ma);
lrc(pa, geci);
</script> @马黑黑 交一份今天的竖版歌词作业。。
前几天忙了一下下，感觉好几天没做图了，今天涂了一张，用上新效果。。{:4_173:} 我一直用网站里收的三个编辑器做贴修改，这竖版歌词开始预览不显示，
现在发网站正常，发到这里也正常。。。
竖版代码非常完美。。。{:4_191:} 做贴思路：先有了图片比较有意境，里面有潮汐和海岸线，后来有了文字，再后来找到一首潮汐锁定的歌，
所以标题就定为这四个字。。
但在做歌词的时候，潮汐锁定这曲子整两遍没做成，我迷信，做不出来的就舍弃了。。。{:4_173:}
最后换了类似的这曲，一次成功。 花飞飞 发表于 2025-8-22 20:34
@马黑黑 交一份今天的竖版歌词作业。。
前几天忙了一下下，感觉好几天没做图了，今天涂了一张，用上新效果 ...
厉害了我的妹{:4_170:} 花飞飞 发表于 2025-8-22 20:41
做贴思路：先有了图片比较有意境，里面有潮汐和海岸线，后来有了文字，再后来找到一首潮汐锁定的歌，
所以 ...
{:4_187:} 马黑黑 发表于 2025-8-22 20:48
厉害了我的妹
哥才是全世界最厉害的。。你看看这歌词上的图片，眼熟不{:4_173:} 马黑黑 发表于 2025-8-22 20:48
你迷信不啊，肯定不，没歌词的都要整出歌词来。。。
{:4_170:}
我是有歌词它一遍没做成就不想要了。 花飞飞 发表于 2025-8-22 20:51
你迷信不啊，肯定不，没歌词的都要整出歌词来。。。
我是有歌词它一遍没做成就不想要了。
{:4_196:} 花飞飞 发表于 2025-8-22 20:50
哥才是全世界最厉害的。。你看看这歌词上的图片，眼熟不
就是那个飞鸟 马黑黑 发表于 2025-8-22 20:53
就是那个飞鸟
歌词上的用的是之前你写的程序做出来的小图案
那个飞鸟代替的是粒子，可暂隐式的。{:4_173:} 马黑黑 发表于 2025-8-22 20:52
掐哭你。。笑成这样。{:4_170:}
我去瞅瞅你那歌词补齐了么。。我猜对几个字儿 花飞飞 发表于 2025-8-22 20:55
歌词上的用的是之前你写的程序做出来的小图案
那个飞鸟代替的是粒子，可暂隐式的。
挺好的 花飞飞 发表于 2025-8-22 20:56
掐哭你。。笑成这样。
我去瞅瞅你那歌词补齐了么。。我猜对几个字儿
猜对不少。
歌词还有一句你不太确定的，开头部分还不能确定 马黑黑 发表于 2025-8-22 20:57
挺好的
{:4_205:}我也觉着挺好的。 马黑黑 发表于 2025-8-22 20:58
猜对不少。
歌词还有一句你不太确定的，开头部分还不能确定
人工听的也听了，智能该问的都问了，
人工智能全上阵，结果还有俩字儿搞不太定。
还有这样自己猜歌词儿的。。。我算是见着了，你厉害。 花飞飞 发表于 2025-8-22 21:22
人工听的也听了，智能该问的都问了，
人工智能全上阵，结果还有俩字儿搞不太定。
还有这样自己猜歌词儿 ...
三宝也不是什么没名气的音乐人，王菲有些歌也是他写的。就是太低调 花飞飞 发表于 2025-8-22 21:19
我也觉着挺好的。
{:4_191:} 马黑黑 发表于 2025-8-22 21:45
三宝也不是什么没名气的音乐人，王菲有些歌也是他写的。就是太低调
是真好听啊。。间奏也震撼。。
我真不会老老实实听歌的，{:4_170:}
这首真听完了，还听好几遍 马黑黑 发表于 2025-8-22 21:45
白的100度的来一杯{:4_173:}