论坛 › 欢乐水吧 › 湖心--《画心师》片头曲（学习黑师召唤播放器效果）

雨中悄然 发表于 2023-3-10 18:03

湖心--《画心师》片头曲（学习黑师召唤播放器效果）

本帖最后由 雨中悄然 于 2023-3-10 18:09 编辑 <br /><br /><style>#papa {
        --state: paused;
        margin: -80px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 675px;
        background: #7E949B url('https://pic.imgdb.cn/item/6409e707f144a010071aaab4.jpg') no-repeat;
        box-shadow: 3px 3px 20px #000;
        place-items: center;
        z-index: 1;
        position: relative;
}
#mypic {
        position: absolute;
        left: 200px;
        top: 10px;
}
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        opacity: .5;
        object-fit: cover;
        pointer-events: none;
}
#mplayer {
        position: absolute;
        top: 130px;
        left: 425px;
        width: 360px;
        height: 360px;
        border:10px solid LightBLue;
        border-radius: 80%;
        outline: 0.5px solid ForestGreen;
        outline-offset: 2px;
        animation: sd .15s infinite alternate var(--state);
        cursor: pointer;
        transition: 1s;
}

#mplayer:hover { transform: scale(1.1); }

#lrc { --motion: cover1; --tt: 5s; position: absolute;right:10%;bottom: 30px; font: bold 2.4em sans-serif; color: hsl(20, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); z-index: 99;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(100, 90%, 50%, .45), hsla(180, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);z-index: 99; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes sd {
        from { box-shadow: 0 0 30px hsla(0,100%,50%,.45), 0 0 40px hsla(240,100%,50%,.25) inset; }
        to { box-shadow: 0 0 60px hsla(120,80%,40%,.35), 0 0 80px hsla(120,100%,50%,.25) inset;}
}</style><div id="papa"><div id="lrc" data-lrc="花潮lrc在线"></div><img id="mypic" src="https://638183.freep.cn/638183/t22/animal/bird3.gif" alt="" /><div id="mplayer"><video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/14/5b5186309703d_10s_big.mp4" autoplay="" loop="" muted=""></video><audio id="aud" src="https://music.163.com/song/media/outer/url?id=475249169.mp3" autoplay="" loop=""></audio></div></div><script>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);};
let mState = () => aud.paused ? (vid.pause(), lrc.style.setProperty('--state', 'paused')) : (vid.play(), lrc.style.setProperty('--state', 'running'));

let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                                if (mKey === j) showLrc(lrcAr);
                                        else continue;
                        }
        }
});

let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};</script>

雨中悄然 发表于 2023-3-10 18:10

@马黑黑 交份作业

雨中悄然 发表于 2023-3-10 18:12

{:4_170:}谢谢老师改作业辛苦，有些地方我再自己好好琢磨

马黑黑 发表于 2023-3-10 18:24

雨中悄然 发表于 2023-3-10 18:10
@马黑黑 交份作业

100   √

马黑黑 发表于 2023-3-10 18:25

雨中悄然 发表于 2023-3-10 18:12
谢谢老师改作业辛苦，有些地方我再自己好好琢磨

从构思上讲，可以打超过满分；从实现代码上看，要扣一点点的，所以总体满分

红影 发表于 2023-3-10 19:21

漂亮，把视频正好嵌在图片上的圆环中了，这个构思很巧妙。欣赏悄然好帖{:4_199:}

红影 发表于 2023-3-10 19:22

歌词同步的色彩搭配和视频很协调，悄然做得很用心。{:4_187:}
视频的圆框很漂亮，但外面的绿色方框貌似可以不要？

马黑黑 发表于 2023-3-10 19:23

红影 发表于 2023-3-10 19:21
漂亮，把视频正好嵌在图片上的圆环中了，这个构思很巧妙。欣赏悄然好帖

感觉是大师级别的思路

庶民 发表于 2023-3-10 20:21

很有特色的。

红影 发表于 2023-3-10 21:59

马黑黑 发表于 2023-3-10 19:23
感觉是大师级别的思路

是啊，悄然的构思总是那么巧的呢{:4_204:}

马黑黑 发表于 2023-3-10 22:14

红影 发表于 2023-3-10 21:59
是啊，悄然的构思总是那么巧的呢

磨炼出来的

团长 发表于 2023-3-10 22:19

漂亮，音乐也好听，名师出高徒{:4_199:}

花飞飞 发表于 2023-3-10 23:05

马黑黑 发表于 2023-3-10 18:24
100   √

{:4_199:}收到收到

花飞飞 发表于 2023-3-10 23:07

马黑黑 发表于 2023-3-10 18:25
从构思上讲，可以打超过满分；从实现代码上看，要扣一点点的，所以总体满分

老师有理，代码该扣。{:4_170:}争取不扣

花飞飞 发表于 2023-3-10 23:10

马黑黑 发表于 2023-3-10 19:23
感觉是大师级别的思路

{:4_170:}老师夸了，虽当不起，还是很开心

马黑黑 发表于 2023-3-10 23:21

花飞飞 发表于 2023-3-10 23:07
老师有理，代码该扣。争取不扣

{:4_173:}

马黑黑 发表于 2023-3-10 23:21

花飞飞 发表于 2023-3-10 23:05
收到收到

{:4_190:}

花飞飞 发表于 2023-3-10 23:22

马黑黑 发表于 2023-3-10 23:21


提神茶

马黑黑 发表于 2023-3-10 23:22

花飞飞 发表于 2023-3-10 23:22
提神茶

提提神，少点代码错误

红影 发表于 2023-3-11 14:39

马黑黑 发表于 2023-3-10 22:14
磨炼出来的

黑黑对悄然很了解呢{:4_187:}

查看完整版本: 湖心--《画心师》片头曲（学习黑师召唤播放器效果）