论坛 › 欢乐水吧 › 套用黑黑老师代码帖：《怪我无情》 回致朵拉

千羽 发表于 2022-11-16 19:30

套用黑黑老师代码帖：《怪我无情》 回致朵拉

<style>
#papa {
        margin: 120px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 629px;
        background: gray url('https://pic.imgdb.cn/item/6374c9bd16f2c2beb13f565d.jpg') no-repeat center/cover;
        display: grid;
        place-items: center;
        box-shadow: 3px 3px 20px #000;
        perspective: 1000px;
        overflow: hidden;
        user-select: none;
        position: relative;
        z-index: 1;
}
#mplayer {
        position: absolute;
        bottom: 20px;
        grid-template-columns: auto auto auto;
        gap: 6px;
        display: grid;
        place-items: center;
        color: hsl(0, 100%, 100%);
        font: normal 16px sans-serif;
        z-index: 999;
}
#btnplay {
        --state: paused;
        margin-right: -4px;
        width: 30px;
        height: 30px;
        font: bold 30px/30px serif;
        text-align: center;
        cursor: pointer;
        animation: rot 4s infinite linear;
        animation-play-state: var(--state);
}
#prog {
        width: 200px;
        height: 20px;
        opacity: .95;
        cursor: pointer;
}
.stars {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: silver;
        transform-style: preserve-3d;
}
@keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <div id="mplayer">
                <span id="btnplay">✿</span>
                <meter id="prog" low="30" high="90" max="100" optimum="100" value="1"></meter>
                <span id="tmsg">00:00 | 00:00</span>
        </div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1894524133.mp3" loop autoplay></audio>

<script>
(function() {
        (function() {
                for(j=0; j<500; j++) {
                        let ele = document.createElement('span');
                        ele.className = 'stars';
                        ele.style.cssText += `
                                left: ${Math.random() * 400 + 450}px;
                                top: ${Math.random() * 80 + 100}px;
                                background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
                                box-shadow: 0 0 5px hsla(0,10%,100%,.25);
                                transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
                                animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
                        `;
                        papa.appendChild(ele);
                }
        })();
        btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
        prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
        }
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => aud.play());
        aud.addEventListener('timeupdate', () => {
                prog.value = aud.currentTime / aud.duration * 100;
                tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
        });
        let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
        };
})();
</script>

千羽 发表于 2022-11-16 19:31

本帖最后由 千羽 于 2022-11-16 19:34 编辑

@朵拉{:4_195:}
朵拉来收礼了{:4_173:}

千羽 发表于 2022-11-16 19:33

本帖最后由 千羽 于 2022-11-16 19:35 编辑

因为喜欢《怪我无情》，又不想动脑，于是重做了一遍{:4_181:}

https://www.163.com/v/video/VKKICNVQL.html#sns_qqZone

这地址论坛不支持，发不出来。点击，陶醉……

马黑黑 发表于 2022-11-16 20:10

怪我无情

千羽 发表于 2022-11-16 20:47

马黑黑 发表于 2022-11-16 20:10
怪我无情

问好黑黑老师{:4_187:}

马黑黑 发表于 2022-11-16 20:49

千羽 发表于 2022-11-16 20:47
问好黑黑老师

晚上好，请喝水{:4_190:}

千羽 发表于 2022-11-16 21:01

马黑黑 发表于 2022-11-16 20:49
晚上好，请喝水

黑黑老师，那女指挥是不是太棒了{:4_203:}

醉美水芙蓉 发表于 2022-11-16 21:08

蜻蜓 发表于 2022-11-16 21:12

这美女的背影好漂亮！千羽来看你了{:5_117:}

红影 发表于 2022-11-16 21:18

这个背景用小珠珠的效果特别漂亮，这首也很好听啊。欣赏羽儿好帖，朵宝收礼开心{:4_187:}

马黑黑 发表于 2022-11-16 21:18

千羽 发表于 2022-11-16 21:01
黑黑老师，那女指挥是不是太棒了

女指挥很帅气

千羽 发表于 2022-11-16 21:27

醉美水芙蓉 发表于 2022-11-16 21:08
好听！谢谢千羽分享！

晚上好{:4_187:}好芙蓉

千羽 发表于 2022-11-16 21:28

蜻蜓 发表于 2022-11-16 21:12
这美女的背影好漂亮！千羽来看你了

好高兴看到蜻蜓，{:4_179:}

蜻蜓 发表于 2022-11-16 21:29

千羽 发表于 2022-11-16 21:28
好高兴看到蜻蜓，

没事来溜达

千羽 发表于 2022-11-16 21:30

红影 发表于 2022-11-16 21:18
这个背景用小珠珠的效果特别漂亮，这首也很好听啊。欣赏羽儿好帖，朵宝收礼开心

问好影儿，是很好听的{:4_187:}

千羽 发表于 2022-11-16 21:32

蜻蜓 发表于 2022-11-16 21:29
没事来溜达

蜻蜓，这代码挺好的，只需换一图片和一首音乐就好了，试试？{:4_173:}

蜻蜓 发表于 2022-11-16 21:34

千羽 发表于 2022-11-16 21:32
蜻蜓，这代码挺好的，只需换一图片和一首音乐就好了，试试？

等空了来学{:4_173:}

千羽 发表于 2022-11-16 21:35

蜻蜓 发表于 2022-11-16 21:34
等空了来学

嗯，期待中{:4_185:}

红影 发表于 2022-11-16 21:53

千羽 发表于 2022-11-16 21:30
问好影儿，是很好听的

听着音乐，看着珠珠飞，很惬意{:4_208:}

千羽 发表于 2022-11-16 21:54

红影 发表于 2022-11-16 21:53
听着音乐，看着珠珠飞，很惬意

我是一直在看那视频，好喜欢{:4_173:}

查看完整版本: 套用黑黑老师代码帖：《怪我无情》 回致朵拉