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

AURORA - Do You Feel?

<style>
#tz { margin: 30px 0 30px calc(50% - 561px); width: 960px; height: 600px; background: #eee; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; pointer-events: none; }
#tz::before, #tz::after { content: ''; position: absolute; }
#tz::before { content: attr(data-lrc); bottom: 0; width: 100%; height: 60px; background: repeating-linear-gradient(to right, red, green, blue, green, red) center/200px; -webkit-background-clip: text; color: transparent; font: normal 2em sans-serif; display: grid; place-items: center; }

#tz::after { left: calc(50% - 70px); top: 10px; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; pointer-events: auto; }
.vid { position: absolute; width: 960px; height: 540px; }
.vid:nth-of-type(2) { right: 5px; top: 5px; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 60px black; cursor: pointer; pointer-events: auto; }
</style>

<div id="tz" data-lrc="HUACHAO PLAYER">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2164190769" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6c5933022.mp4" autoplay loop muted disablePictureInPicture></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec3ab75a31.mp4" autoplay loop muted disablePictureInPicture></video>
</div>

<script>
var curkey = 0;
var vids = document.querySelectorAll('.vid');
aud.ontimeupdate = () => {
        if(curkey > lrcAr.length - 1) return;
        if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
        }
};
aud.onseeked = () => curkey = 0;
tz.onclick = () => {
        aud.paused ? aud.play() : aud.pause();
        vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
vids.oncontextmenu = (e) => e.preventDefault();
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
</script>

马黑黑 发表于 2024-6-17 18:13

帖子代码
<style>
#tz { margin: 30px 0 30px calc(50% - 561px); width: 960px; height: 600px; background: #eee; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; pointer-events: none; }
#tz::before, #tz::after { content: ''; position: absolute; }
#tz::before { content: attr(data-lrc); bottom: 0; width: 100%; height: 60px; background: repeating-linear-gradient(to right, red, green, blue, green, red) center/200px; -webkit-background-clip: text; color: transparent; font: normal 2em sans-serif; display: grid; place-items: center; }

#tz::after { left: calc(50% - 70px); top: 10px; width: 140px; height: 140px; border-radius: 50%; cursor: pointer; pointer-events: auto; }
.vid { position: absolute; width: 960px; height: 540px; }
.vid:nth-of-type(2) { right: 5px; top: 5px; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 60px black; cursor: pointer; pointer-events: auto; }
</style>

<div id="tz" data-lrc="HUACHAO PLAYER">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2164190769" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6c5933022.mp4" autoplay loop muted disablePictureInPicture></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec3ab75a31.mp4" autoplay loop muted disablePictureInPicture></video>
</div>

<script>
var curkey = 0;
var vids = document.querySelectorAll('.vid');
aud.ontimeupdate = () => {
        if(curkey > lrcAr.length - 1) return;
        if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
        }
};
aud.onseeked = () => curkey = 0;
tz.onclick = () => {
        aud.paused ? aud.play() : aud.pause();
        vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};
vids.oncontextmenu = (e) => e.preventDefault();
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
</script>【说明】本帖歌词同步显示的实现无JS插件依赖，就是没有逐字模拟同步；歌词数组有无第三个子数组元素不影响。

南无月 发表于 2024-6-17 18:24

这个彩虹字直接当歌词了，本来就花花的挺好看，不用同步也好看呐{:4_170:}

马黑黑 发表于 2024-6-17 18:25

南无月 发表于 2024-6-17 18:24
这个彩虹字直接当歌词了，本来就花花的挺好看，不用同步也好看呐

这个简单的，不用那个插件

南无月 发表于 2024-6-17 18:28

歌词:before伪元素放最下方，高60，视频比背景少60，刚好可以看得到歌词。。
这个设计是第一回看到。
刚我还在贴子里回说歌词么一般会给个层级的。。
这样整一下:before虽然在最下方，但没有层级照样显示。。{:4_199:}

马黑黑 发表于 2024-6-17 18:29

南无月 发表于 2024-6-17 18:28
歌词:before伪元素放最下方，高60，视频比背景少60，刚好可以看得到歌词。。
这个设计是第一回看到。
刚 ...

这是因为没有重叠

南无月 发表于 2024-6-17 18:30

:after的确很牛啊，
整个圆形的透明的鼠标点击区域，
也不用设层级，它就在最上方。。{:4_199:}

这个伪元素的层次分布教程实例贴。。{:4_170:}

马黑黑 发表于 2024-6-17 18:31

南无月 发表于 2024-6-17 18:30
:after的确很牛啊，
整个圆形的透明的鼠标点击区域，
也不用设层级，它就在最上方。。


{:4_173:}

南无月 发表于 2024-6-17 18:31

马黑黑 发表于 2024-6-17 18:25
这个简单的，不用那个插件

哎。。简单又好看。。
就是找来找去无插件才觉得好厉害的呀。。

南无月 发表于 2024-6-17 18:36

马黑黑 发表于 2024-6-17 18:29
这是因为没有重叠

我夸的是思路啊，创意啊，构想啊。。这个没有重叠我知道的，故意漏出来的

南无月 发表于 2024-6-17 18:37

马黑黑 发表于 2024-6-17 18:31

你讲完，这个例子里头就实现了。。踏实
感觉到啦，老师你真是好得不得了不得了{:4_170:}

马黑黑 发表于 2024-6-17 19:23

南无月 发表于 2024-6-17 18:37
你讲完，这个例子里头就实现了。。踏实
感觉到啦，老师你真是好得不得了不得了

{:4_203:}

马黑黑 发表于 2024-6-17 19:24

南无月 发表于 2024-6-17 18:36
我夸的是思路啊，创意啊，构想啊。。这个没有重叠我知道的，故意漏出来的

现在漏个夜壶什么的不容易{:4_170:}

马黑黑 发表于 2024-6-17 19:39

南无月 发表于 2024-6-17 18:31
哎。。简单又好看。。
就是找来找去无插件才觉得好厉害的呀。。

代码简单

红影 发表于 2024-6-17 19:40

这个还特地设置了个伪元素after，让大视频也能被点击。当然右上角的小视频也能点击。{:4_187:}

红影 发表于 2024-6-17 19:42

去换了个中文的歌词也一样好看{:4_173:}

红影 发表于 2024-6-17 19:44

右上角的视频看你设置成了是圆，怎么我这里看到的还是方的啊，只有拉动屏幕上下时看到是圆的{:4_203:}

红影 发表于 2024-6-17 19:46

让底板的视频下来，才看到右边的视频是圆的。

马黑黑 发表于 2024-6-17 19:54

红影 发表于 2024-6-17 19:46
让底板的视频下来，才看到右边的视频是圆的。

{:4_173:}

马黑黑 发表于 2024-6-17 19:55

红影 发表于 2024-6-17 19:40
这个还特地设置了个伪元素after，让大视频也能被点击。当然右上角的小视频也能点击。

{:4_181:}
页: [1] 2 3 4 5 6 7
查看完整版本: AURORA - Do You Feel?