小辣椒 发表于 2024-6-11 20:27

在心理从此永远有个你 （学习套用黑黑端午节效果）

<style>
#tz { margin: 130px 0 30px calc(50% - 721px); width: 1280px; height: 697px; background: url('https://wj.zp68.com/lxx/yunhua/2024/06/11/80.jpg ') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 680px; top: 420px; font: normal 30px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
#player { position: absolute; left: calc(70% - 140px); bottom: 60px; 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: green; --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; filter: hue-rotate(180deg); 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; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 140px); } }

#dt2{ position: absolute; width:148px; height: 211px; top: 80px; left: 950px; }
#dt3{ position: absolute; width: 294px; height: 200px; top: 480px; left: 220px; }
</style>

<div id="tz">
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2024/06/11/F.gif"alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt3" src=" https://xlaj.cn/assets/file/zp/20240609145833.gif " alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />

        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/06/11/01.mp3" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/91/5ed0c93e00e78.mp4" autoplay loop muted></video>
        <div id="lrc">HUACHAO PLAYER</div>
        <div id="player" data-time="00:00 00:00"></div>
</div>

<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));

var lrcKey = 0;

var showLrc = () => {
        if(lrcKey >= lrcAr.length) return false;
        lrc.innerText = lrcAr;
        lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
        lrcKey ++;
};

var mState = () => {
        tz.style.setProperty('--state',['running','paused'][+aud.paused]);
        if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};

var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');

aud.onplaying = aud.onpause = () => mState();

aud.onseeked = () => {
        for(var j = 0; j < lrcAr.length; j ++) {
                if(aud.currentTime < lrcAr) {
                        lrcKey = j - 1;
                        if(lrcKey < 0) lrcKey = 0;
                        break;
                }
        }
};

aud.ontimeupdate = () => {
        player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
        player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
        if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}

player.onclick = (e) => {
        if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
        if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
}

player.onmousemove = (e) => {
        if(e.offsetY < 0) {
                if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
                        player.title = aud.paused ? '播放' : '暂停';
                        player.style.cursor = 'pointer';
                }
        }else{
                player.title = '调节进度';
                player.style.cursor = 'pointer';
        }
};

let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
</script>

小辣椒 发表于 2024-6-11 20:28

下午看见黑黑这个播放器效果，感觉太美了，立马套用一个{:4_170:}

@马黑黑

小辣椒 发表于 2024-6-11 20:28

网络情歌，这个图图是N前做专辑分享用的，今天就用上了{:4_173:}

小辣椒 发表于 2024-6-11 20:29

感谢黑黑源码分享。呼叫冬雨一起做一个，这首歌你应该不会忘记的@冬天的雨

小辣椒 发表于 2024-6-11 20:30

感觉做的简单了一点，但发现这个效果真的很好{:4_172:}

马黑黑 发表于 2024-6-11 20:34

小辣椒 发表于 2024-6-11 20:28
下午看见黑黑这个播放器效果，感觉太美了，立马套用一个

@马黑黑

{:4_199:}

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

马黑黑 发表于 2024-6-11 20:34


套一个{:4_170:}

起个网名好难 发表于 2024-6-11 20:48

欣赏美帖！

是不是每天必有一帖， 若是确实有些忙。

小辣椒 发表于 2024-6-11 20:53

起个网名好难 发表于 2024-6-11 20:48
欣赏美帖！

是不是每天必有一帖， 若是确实有些忙。

难难家里没有人管的时候每天一个帖可以完成的，家里有人我就不能做了

起个网名好难 发表于 2024-6-11 20:56

小辣椒 发表于 2024-6-11 20:53
难难家里没有人管的时候每天一个帖可以完成的，家里有人我就不能做了

做帖毕竟是个业余爱好用不着这么拼吧。

马黑黑 发表于 2024-6-11 21:00

小辣椒 发表于 2024-6-11 20:47
套一个

{:4_191:}

梦油 发表于 2024-6-11 21:03

小蜜蜂虽小，但给整个画面增添了情趣。

小辣椒 发表于 2024-6-11 21:07

起个网名好难 发表于 2024-6-11 20:56
做帖毕竟是个业余爱好用不着这么拼吧。

{:4_189:}{:4_196:}{:4_205:}{:4_172:}

红影 发表于 2024-6-11 21:08

漂亮的画面，非常温馨。欣赏亲爱的好帖{:4_199:}

小辣椒 发表于 2024-6-11 21:08

梦油 发表于 2024-6-11 21:03
小蜜蜂虽小，但给整个画面增添了情趣。

梦油看的仔细的，这小蜜蜂我还缩小了一点，还是看的很清啊{:4_173:}

起个网名好难 发表于 2024-6-11 21:15

小辣椒 发表于 2024-6-11 21:07


{:4_191:}

朵拉 发表于 2024-6-11 21:27

喜欢的一首歌，漂亮的制作{:4_204:}

绿叶清舟 发表于 2024-6-11 21:30

这贴看着就很甜蜜的，赞{:4_204:}

醉美水芙蓉 发表于 2024-6-11 21:58

老谟深虑 发表于 2024-6-12 09:25

         欣赏老师的星美音画，上午好！
页: [1] 2
查看完整版本: 在心理从此永远有个你 （学习套用黑黑端午节效果）