论坛 › 欢乐水吧 › 古茶（学习黑师《未闻花名》乖乖的刺播放效果）

雨中悄然 发表于 2023-4-16 17:24

古茶（学习黑师《未闻花名》乖乖的刺播放效果）

本帖最后由 雨中悄然 于 2023-4-16 17:27 编辑 <br /><br /><style>
#papa {
        margin:-80px 0 0 calc(50% - 593px);
        width:1024px;
        height: 640px;
        border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
        background: url('https://s1.ax1x.com/2023/04/16/p99tlJU.jpg') center/cover no-repeat;
        box-shadow: 3px 8px 20px rgba(0,0,0,.6);
        position: relative;
        display:grid;
        overflow: hidden;
        place-items: center;
    --state: paused;
    animation: hue 10s infinite alternate var(--state);
}
#mplayer {position: absolute;width: 300px;height: 300px;right: 60px;bottom:180;cursor: pointer;transform-style: preserve-3d;}
.line {position: absolute;width: 1px;height: 100%;transform-style: preserve-3d;}
#vid {
        position: absolute;
        width: 1400px;
        height: 100%;
        border-radius: 2%;
        opacity: .15;
        object-fit: cover;
        pointer-events: none;
}
#lrc {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%);
    height: 50px;
    font: bold 30px/50px sans-serif;
    background: transparent;
    color:Thistle ;
    display: grid;
    place-items: center start;
    pointer-events: none;
    --motion: cover2;
    --tt: 1s;
}

#lrc::before,
#lrc::after {
    position: absolute;
    content: '';
}

#lrc::before {
    content: attr(data-lrc);
    width: 0%;
    height: 100%;
    color: Purple;
    white-space: pre;
    overflow: hidden;
    animation: var(--motion) var(--tt) linear forwards var(--state);
}

#lrc::after {
    width: 100px;
    height: 100px;
    left: -100px;
    border-radius: 50%;
    background:center/cover no-repeat;
    cursor: pointer;
    pointer-events: auto;
    animation: rot 4s infinite linear var(--state);
}

@keyframes cover1 {
    to {
      width: 100%;
    }
}

@keyframes cover2 {
    to {
      width: 100%;
    }
}
@keyframes rot {
    to {
      transform: rotate(360deg);
    }
}
@keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
@keyframes hue {
      to { filter: hue-rotate(360deg); }
</style>

<div id="papa">
      <div id="mplayer"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325344" autoplay loop></audio>

<script>
let total = 60, spans = [];
let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
Array.from({length: 64}).forEach( (item,key) => {
      let sp = document.createElement('span');
      sp.className = 'line';
      sp.style.cssText += `
                --sy: ${Math.random() * 720 - 360}deg;
                --sz: ${Math.random() * 720 - 360}deg;
                background: rgba(${Math.random() * 50}, ${Math.random() * 255}, ${Math.random() * 50}, .8);
                transform: rotateY(var(--sy)) rotateZ(var(--sz));
                animation: rot 30s linear infinite var(--state);
      `;
      mplayer.appendChild(sp);
});

mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

雨中悄然 发表于 2023-4-16 17:26

@马黑黑 来看看论坛效果{:4_173:}整好了

马黑黑 发表于 2023-4-16 19:04

刺播，这个命名好
帖子大气洒脱，尽显帖主布局与掌控能力

红影 发表于 2023-4-16 19:53

这个效果在悄然的帖子里美伦美央，色彩的变化竟如此迷人，太美了{:4_431:}

红影 发表于 2023-4-16 19:58

加了朦胧的视频效果，还有歌词同步。色相变化让歌词和相关因素都变化了。这个帖子如梦似幻，真迷人{:4_199:}

梦缘 发表于 2023-4-16 20:00

整得很好看，欣赏问好！{:4_204:}

红影 发表于 2023-4-16 20:00

发现色相变化特别适合这样的背景，换成白天的倒不一定能有这样的效果呢{:4_173:}

梦油 发表于 2023-4-16 20:24

画面给人一种朦朦胧胧的感觉。{:4_199:}

樵歌 发表于 2023-4-17 07:58

学霸绝对的学霸，这效果大有青出于蓝{:4_199:}

非常开心 发表于 2023-4-17 09:20

老师的好作品百看不厌！

雨中悄然 发表于 2023-4-17 18:29

马黑黑 发表于 2023-4-16 19:04
刺播，这个命名好
帖子大气洒脱，尽显帖主布局与掌控能力

这回老师夸得仔细，我得多瞧两遍。。美滋滋{:4_170:}

雨中悄然 发表于 2023-4-17 18:29

红影 发表于 2023-4-16 19:53
这个效果在悄然的帖子里美伦美央，色彩的变化竟如此迷人，太美了

想说纯色小播用这个效果应该更合适，就试试看

雨中悄然 发表于 2023-4-17 18:30

红影 发表于 2023-4-16 19:58
加了朦胧的视频效果，还有歌词同步。色相变化让歌词和相关因素都变化了。这个帖子如梦似幻，真迷人{:4_199: ...

抄的抄的，抄的之前贴子的代码。
发现视频不用更换就挺好，就留着了

雨中悄然 发表于 2023-4-17 18:30

梦缘 发表于 2023-4-16 20:00
整得很好看，欣赏问好！

感谢梦缘支持，谢谢你哟{:4_187:}

雨中悄然 发表于 2023-4-17 18:31

红影 发表于 2023-4-16 20:00
发现色相变化特别适合这样的背景，换成白天的倒不一定能有这样的效果呢

是得暗色，跟那个刀削面比起来的话，变化更清晰

雨中悄然 发表于 2023-4-17 18:31

梦油 发表于 2023-4-16 20:24
画面给人一种朦朦胧胧的感觉。

朦胧是视频的功劳，谢谢回复{:4_187:}

雨中悄然 发表于 2023-4-17 18:32

樵歌 发表于 2023-4-17 07:58
学霸绝对的学霸，这效果大有青出于蓝

樵管太会夸了，谢谢鼓励{:4_187:}

雨中悄然 发表于 2023-4-17 18:32

非常开心 发表于 2023-4-17 09:20
老师的好作品百看不厌！

感谢临贴回复{:4_187:}

马黑黑 发表于 2023-4-17 19:14

雨中悄然 发表于 2023-4-17 18:29
这回老师夸得仔细，我得多瞧两遍。。美滋滋

{:4_187:}

梦油 发表于 2023-4-17 19:42

雨中悄然 发表于 2023-4-17 18:31
朦胧是视频的功劳，谢谢回复

悄然朋友别客气。

查看完整版本: 古茶（学习黑师《未闻花名》乖乖的刺播放效果）