Beyond - 午夜怨曲 - 音乐沙龙 - 花潮论坛

马黑黑 发表于 2024-6-11 07:37

Beyond - 午夜怨曲

马黑黑 发表于 2024-6-11 07:37

帖子代码
<style>
#tz { margin: 30px 0 30px calc(50% - 591px); width: 1024px; height: 680px; background: url('https://638183.freep.cn/638183/t24/2/wyyq.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#lrc { position: absolute; top: 20px; font: normal 30px sans-serif; text-shadow: 1px 1px 1px white; background: linear-gradient(to right, red, blue,green, red); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(-1px -1px 6px gray); user-select: none; animation: swear 6s linear infinite alternate var(--state); }
#player { position: absolute; left: calc(50% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: rgba(170, 70, 140, .8); --prg: 0%; --btnSize: 50px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover; animation: rot 6s linear infinite var(--state);}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; opacity: .5; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
from { transform: perspective(400px) rotateY(20deg); }
to { transform: perspective(400px) rotateY(-20deg); }
}
</style>

<div id="tz">
<audio id="aud" src="https://www.kumeiwp.com/wj/185715/2023/12/29/50af91e6f3d50ca6948569d83241d798.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec038a435c.mp4" autoplay loop disablePictureInPicture muted></video>
<div id="lrc">HUA CHAO PLAYER</div>
<div id="player"></div>
</div>

<script>
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/js2024/tube3dlrc.js';
document.body.appendChild(script);
var lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
</script>

马黑黑 发表于 2024-6-11 07:37

本帖最后由马黑黑于 2024-6-11 12:09 编辑

《Beyond - 午夜怨曲》相关说明 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

南无月 发表于 2024-6-11 12:21

打包后的好看又好用。。3DLRC，歌词空间感比较明显，。。摇摆效果很是新鲜。{:4_199:}

南无月 发表于 2024-6-11 12:22

to right,原来加个方向，歌词渐变就变横的了。。。不然默认上下。。
{:4_173:}

马黑黑 发表于 2024-6-11 12:44

南无月发表于 2024-6-11 12:22
to right,原来加个方向，歌词渐变就变横的了。。。不然默认上下。。

渐变方向的表达，语义化的可以酱紫：

to left - 从右到左
to right - 从左到右
top bottom - 从上到下
to top - 从下到上
to right top - 从左下到右上
to left top - 从右下到左上

等等。

还可以使用角度： 90deg

马黑黑 发表于 2024-6-11 12:45

南无月发表于 2024-6-11 12:21
打包后的好看又好用。。3DLRC，歌词空间感比较明显，。。摇摆效果很是新鲜。

歌词的动画主要由 CSS 实现，JS 只管出歌词。变成什么样的，可以自行设计。

红影发表于 2024-6-11 14:35

这个封装真好，JS里的简单多了，CSS里还留了那么多的可调。黑黑真棒{:4_199:}

红影发表于 2024-6-11 14:36

3d转动，让歌词很有立体感，真漂亮{:4_199:}

红影发表于 2024-6-11 14:37

阴影的设计，让字体的笔画变得那么圆润。美{:4_199:}

马黑黑 发表于 2024-6-11 15:08

红影发表于 2024-6-11 14:37
阴影的设计，让字体的笔画变得那么圆润。美

貌似美就一个字{:4_170:}

马黑黑 发表于 2024-6-11 15:16

红影发表于 2024-6-11 14:35
这个封装真好，JS里的简单多了，CSS里还留了那么多的可调。黑黑真棒

CSS完全可以自行设计，遵循JS的管理思路就好：

播放器div元素，尺寸自设，颜色自设，等等，但必须注意的是，CSS变量 --prg 是设置宿主元素背景色用的，它是进度指示。两个伪元素一个做按钮，一个显示播放时间信息。

lrc UI JS不管，JS只负责显示歌词，可以大胆设计。

视频有 class=“vid" 的话，它们都将被JS脚本和音频进行同步管理。

所有的 CSS动画，animate 属性只要有 var(--state) 也将一同被JS脚本接管，但也有个前提，子元素不要给 --state 变量赋值，一旦赋值，tz 就无法传递新值给它，JS脚本是通过 tz 传递 --state 动态值的。

小辣椒 发表于 2024-6-11 15:56

仔细看了代码，还是有许多不理解，实践了再说

小辣椒 发表于 2024-6-11 16:47

马黑黑发表于 2024-6-11 15:16
CSS完全可以自行设计，遵循JS的管理思路就好：

播放器div元素，尺寸自设，颜色自设，等等，但必须注意 ...

这个自由运用还是有难度的

起个网名好难 发表于 2024-6-11 16:58

马黑黑发表于 2024-6-11 15:16
CSS完全可以自行设计，遵循JS的管理思路就好：

播放器div元素，尺寸自设，颜色自设，等等，但必须注意 ...

把CSS也做成文件引用更好，对其的微调很容易实现。

马黑黑 发表于 2024-6-11 17:27

起个网名好难发表于 2024-6-11 16:58
把CSS也做成文件引用更好，对其的微调很容易实现。

这倒也是

马黑黑 发表于 2024-6-11 17:28

小辣椒发表于 2024-6-11 16:47
这个自由运用还是有难度的

改改

马黑黑 发表于 2024-6-11 17:28

小辣椒发表于 2024-6-11 15:56
仔细看了代码，还是有许多不理解，实践了再说

试试就知道的

南无月 发表于 2024-6-11 17:52

马黑黑发表于 2024-6-11 12:44
渐变方向的表达，语义化的可以酱紫：

to left - 从右到左

如果不设，默认它是从下到上？还是从上到下呀。。

南无月 发表于 2024-6-11 17:53

马黑黑发表于 2024-6-11 12:45
歌词的动画主要由 CSS 实现，JS 只管出歌词。变成什么样的，可以自行设计。

好哒，这个等细细研究一下JS文件你的说明，就更好理解啦。。

页: [1] 2 3 4 5

花潮论坛's Archiver

Beyond - 午夜怨曲