【黑师代码】小美满（学习黑师20240620《云朵-云朵》竖排歌词效果）
<style>#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/buwang02.webp') no-repeat center/cover; box-shadow: 2px 2px 3px gray; z-index: 1; overflow: hidden; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; left: 710px; top: 380px; width: 60px; height: 95%; writing-mode: vertical-rl; font:24px/60px STXingkai; color: transparent; background: repeating-linear-gradient(to bottom, AntiqueWhite, Tan, Wheat, GoldEnrod, AntiqueWhite) 50%/60px 200px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); }
#player { left: calc(50% - 160px); bottom: 590px; width: 120px; height: 120px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; filter: drop-shadow(0 0 40px Beige);place-items: center; animation: rot 16s linear infinite var(--state); opacity: .99;}
#player:hover { width: 20px; }
c-c { position: absolute; width: 80%; height: 150%; border: none; border: 2px dotted plum;content: url('https://642303.freep.cn/642303/za/2024062102.png') ; border-radius: 50%; opacity: .69; }
#vid { position: absolute; top:-80px; width: 100%; height: 120%; object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; opacity: .15;}
@keyframes rot { to { transform: rotate(1turn); } }
.pic { position: absolute; top: 0; left: 0; width: 60px; transform: rotate(90deg); offset-path: path('M0 800Q892 1000, 1700 200'); offset-distance: 0; animation: fly 30s infinite var(--state);opacity: .35; }
.pic:nth-of-type(2) { animation-delay: -8s; filter: hue-rotate(60deg); }
.pic:nth-of-type(3) { animation-delay: -15s; filter: hue-rotate(90deg); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { offset-distance: 100%; } }
</style>
<div id="tz" data-lrc="HUACHAO">
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4" autoplay loop muted disablePictureInPicture></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2019776786" autoplay loop></audio>
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<div id="player" title="播放/暂停"></div>
</div>
<script>
var curkey = 0, lrcAr = [], total =10;
Array.from({length: total}).forEach((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `
transform: rotate(${360 / total * k}deg);
border-color: Olive;
`;
player.appendChild(c);
});
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play(): aud.pause();
var lrc = `
许巍 - 执着
学习黑师20240620《云朵》竖排歌词效果
歌词编辑：朱学赢
词曲：许巍
每个夜晚来临的时候
孤独总在我左右
每个黄昏心跳的等候
是你无限的温柔
每次面对你的时候
不敢看你的双眸
在我温柔的笑容背后
有多少泪水哀愁
不管时空怎么转变
世界怎么改变
你的爱总在我心间
你是否明白
我想超越这平凡的生活
注定现在就是漂泊
无法停止我内心的狂热
对未来的执着
拥抱着你
oh my baby
我看到你在流泪
是否爱我让你伤悲
让你心碎
拥抱着你
oh my baby
可你知道我无法后退
纵然是我苍白憔悴
伤痕累累
不管时空怎么转变
世界怎么改变
你的爱总在我心间
你是否明白
我想超越这平凡的生活
注定现在就是漂泊
无法停止我内心的狂热
对未来的执着
拥抱着你
oh my baby
我看到你在流泪
是否爱我让你伤悲
让你心碎
拥抱着你
oh my baby
可你知道我无法后退
纵然是我苍白憔悴
伤痕累累
拥抱着你
oh my baby
我看到你在流泪
是否爱我让你伤悲
让你心碎
拥抱着你
oh my baby
可你知道我无法后退
纵然是我苍白憔悴
伤痕累累
纵然是我苍白憔悴
伤痕累累
oh baby don’t cry
`;
getAr(lrc);
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
@马黑黑 老师来瞧一眼，交一份竖排文字作业{:4_187:} 这是正宗的漂亮 马黑黑 发表于 2024-6-22 19:17
这是正宗的漂亮
这个正宗听着跟以往不一样{:4_173:}强化的呀 马黑黑 发表于 2024-6-22 19:17
这是正宗的漂亮
这贴我也挺满意 就是了，必竟改了好几次{:4_173:} 南无月 发表于 2024-6-22 19:41
这贴我也挺满意 就是了，必竟改了好几次
改改更漂亮 南无月 发表于 2024-6-22 19:41
这个正宗听着跟以往不一样强化的呀
{:4_173:} 这小播设计真漂亮，加了个小图再做排布，竟然有这样美妙的效果{:4_199:} 小播触碰后的变形更加奇特，月儿的设计太巧妙了。{:4_187:}
字体设计也漂亮，和竖排歌词那么完美契合。 这字体设计也很漂亮，还是头一次见到呢{:4_187:} 月月的这个图图漂亮，设置运用的效果也是出彩，用心的学习必定有丰硕的成果{:4_199:} 马黑黑 发表于 2024-6-22 20:11
改改更漂亮
那没算白费劲了{:4_173:} 马黑黑 发表于 2024-6-22 20:12
这词儿是跟漂亮一起用得么。。一般用于特产{:4_170:} 南无月 发表于 2024-6-23 10:42
这词儿是跟漂亮一起用得么。。一般用于特产
应该可以吧 小辣椒 发表于 2024-6-22 22:18
月月的这个图图漂亮，设置运用的效果也是出彩，用心的学习必定有丰硕的成果
有小辣椒支持太开心了{:4_187:} 南无月 发表于 2024-6-23 10:41
那没算白费劲了
不会白费的 红影 发表于 2024-6-22 21:46
这字体设计也很漂亮，还是头一次见到呢
你能看到吗，我另一台电脑可以，这台不行 红影 发表于 2024-6-22 21:38
小播触碰后的变形更加奇特，月儿的设计太巧妙了。
字体设计也漂亮，和竖排歌词那么完美契合。
想尽量把竖排歌词融在贴子中，色彩调了几次才比较合适 红影 发表于 2024-6-22 21:36
这小播设计真漂亮，加了个小图再做排布，竟然有这样美妙的效果
这个小播加图片，开裂那贴里用过的。试了一下还行就留着了{:4_187:} 马黑黑 发表于 2024-6-23 10:43
应该可以吧
可以，听着很正宗的样子{:4_173:}
页:
[1]
2