朵拉 发表于 2023-3-24 22:31

桃花诺 TO：红影&小辣椒

本帖最后由 朵拉 于 2023-3-24 22:32 编辑 <br /><br /><style>
#papa {
        left: -214px;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://pic.imgdb.cn/item/641da811a682492fcc18a30f.jpg') center/cover no-repeat;
        box-shadow: 4px 8px 20px #000;
        position: relative;
}
#mplayer {
        left: 50%;
        bottom: 20px;
        transform: translate(-50%);
        width: fit-content;
        height: fit-content;
        color: tan;
        position: absolute;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: attr(data-cu);
        bottom: 16px;
}
#mplayer::before { left: 10px; }
#mplayer::after {
        content: attr(data-du);
        right: 10px;
}
#btn {
        display: block;
        margin: auto;
        margin-bottom: -5px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
#prog {
        width: 400px;
        height: 5px;
        border: 1px solid tan;
        border-radius: 5px;
        display: grid;
        place-items: center start;
        position: relative;
}
#prog::before, #prog::after {
        position: absolute;
        content: '';
        cursor: pointer;
}
#prog::before {
        width: var(--ww);
        height: 5px;
        border-radius: 5px;
        background: linear-gradient(to right, pink, green, pink);
}
#prog::after {
        width: 100%;
        height: 30px;
        border: 0px solid red;
}
.cap {
        position: absolute;
        left: calc(var(--ww) - 2px);
        width: 16px;
        height: 16px;
        background: pink;
        border-radius: 50%;
}
.pic {
        position: absolute;
        left: 20%;
        top: 80%;
        width: 120px;
        border-radius: 50%;
        mix-blend-mode: multiply;
        filter: blur(1px) opacity(.6);
       
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <img class="pic" src="" alt="" />
        <div id="mplayer" data-du="00:00" data-cu="00:00">
                <img id="btn" src="https://638183.freep.cn/638183/t23/btn/meihua.png" alt="" />
                <div id="prog"><span class="cap"></span></div>
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2025822726" loop autoplay></audio>

<script>
let canmove = false;

btn.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mplayer.style.setProperty('--state','running'));
aud.addEventListener('pause', () => mplayer.style.setProperty('--state','paused'));
aud.addEventListener('timeupdate', () => {
        if(!canmove) prog.style.setProperty('--ww', aud.currentTime * prog.offsetWidth / aud.duration + 'px');
        mplayer.dataset.cu = toMin(aud.currentTime);
        mplayer.dataset.du = toMin(aud.duration);
});
prog.addEventListener('mousemove', (e) => {
        if (!canmove) return;
        let pos = e.offsetX;
        if (pos < 0) pos = 0;
        if (pos > prog.offsetWidth) pos = prog.offsetWidth;
        prog.style.setProperty('--ww', e.offsetX + 'px');
});
prog.addEventListener('mousedown', (e) => {
        canmove = true;
});
prog.addEventListener('mouseup', (e) => {
        canmove = false;
        aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
});
document.addEventListener('mouseup', () => canmove = false);

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>

马黑黑 发表于 2023-3-24 22:36

漂酿

朵拉 发表于 2023-3-24 22:36

@红影
我的每个帖都留有影宝的小脚印，么么哒{:4_204:}

朵拉 发表于 2023-3-24 22:38

@小辣椒
谢谢小辣椒临帖欣赏，么么哒{:4_204:}

朵拉 发表于 2023-3-24 22:39

@马黑黑
马师 好速度，我还没呼您呢{:4_190:}

朵拉 发表于 2023-3-24 22:41

马黑黑 发表于 2023-3-24 22:36
漂酿

谢谢马师的欣赏，改天送您一个大美女{:4_173:}

马黑黑 发表于 2023-3-24 22:41

朵拉 发表于 2023-3-24 22:41
谢谢马师的欣赏，改天送您一个大美女

{:4_203:}

马黑黑 发表于 2023-3-24 22:42

朵拉 发表于 2023-3-24 22:39
@马黑黑
马师 好速度，我还没呼您呢

瞧见了

庶民 发表于 2023-3-25 06:14


好思维，有创意！

樵歌 发表于 2023-3-25 08:11

桃花一诺美人惊，红影辣椒快来人{:4_187:}

小辣椒 发表于 2023-3-25 13:12

朵拉 发表于 2023-3-24 22:38
@小辣椒
谢谢小辣椒临帖欣赏，么么哒

谢谢朵拉{:4_171:}

朵拉现在套用做非常好了，后面可以自己修改一下，创作自己的风格出来。

红影 发表于 2023-3-26 08:34

朵拉 发表于 2023-3-24 22:36
@红影
我的每个帖都留有影宝的小脚印，么么哒

昨天有事了，没空上来，看到朵宝的礼物好喜悦。谢谢朵宝{:4_179:}

红影 发表于 2023-3-26 08:43

背景图很美，背景图的文字很有创意。欣赏朵宝好帖{:4_204:}
页: [1]
查看完整版本: 桃花诺 TO：红影&小辣椒