朵拉 发表于 2023-8-27 21:31

请恋爱吧（马黑黑原创）

本帖最后由 朵拉 于 2023-8-27 22:28 编辑 <br /><br /><style>
:root { --state: running; --prg: 0%; --delay: 0s; }
.mydiv { margin: 0 0 0 calc(50% - 621px); width: 1080px; height: 674px; background: #333 url('https://pic.imgdb.cn/item/64eb5cad661c6c8e549c4678.jpg'); box-shadow: 0 0 8px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
.heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
.heart:nth-of-type(2) { --delay: -2.5s; }
#mplayer { position: absolute; bottom: 10px; width: 200px; height: 40px; background: linear-gradient(to right,red var(--prg),#eee 0) repeat-x 0 50% / 100% 2px; }
#mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
#mplayer::before { content: attr(data-cu); left: -50px; }
#mplayer::after { content: attr(data-du); right: -50px; }
#btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 0; font: normal 30px sans-serif; cursor: pointer; animation: swing .3s infinite linear var(--state); }
@keyframes swing { from { transform: rotate(90deg) skew(-5deg); } to { transform: rotate(90deg) skew(5deg); } }
@keyframes up { 0% { opacity: 0; transform: rotate(0deg) translateY(0px); } 75% { opacity: 1; transform: rotate(-10deg) translateY(-300px); } 100% { opacity: 0; transform: rotate(-60deg) translateY(0px); } }
</style>

<div class="mydiv">
    <span class="heart">&#128151;</span>
    <span class="heart">&#128147;</span>
    <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
            <div id="btnplay" title="暂停/播放">&#128030;</div>
    </div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1335681335" loop autoplay></audio>
</div>

<script>
(function() {
    let root = document.querySelector(':root');
    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;}
    let mState = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    aud.addEventListener('pause', mState, false);
    aud.addEventListener('play', mState, false);
    aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
    btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();
</script>

红影 发表于 2023-8-27 21:57

制作漂亮，欣赏朵宝好帖{:4_187:}

朵拉 发表于 2023-8-27 22:28

红影 发表于 2023-8-27 21:57
制作漂亮，欣赏朵宝好帖

谢谢影宝欣赏，么么哒{:4_185:}

朵拉 发表于 2023-8-27 22:29

@马黑黑
马师 晚上好，学生交作业，请指正哈~~{:4_190:}

红影 发表于 2023-8-27 22:48

朵拉 发表于 2023-8-27 22:28
谢谢影宝欣赏，么么哒

问好朵宝，晚上好{:4_179:}

风中飞尘 发表于 2023-8-28 08:59

背景图不错拿走了   不介意把 {:4_366:}

亦是金 发表于 2023-8-28 11:29

好制作！欣赏了！{:4_187:}

马黑黑 发表于 2023-8-28 12:22

这个帖子，清爽干净，欣赏

朵拉 发表于 2023-8-28 15:41

风中飞尘 发表于 2023-8-28 08:59
背景图不错拿走了   不介意把

风师喜欢这图图，是我的荣幸，
完全不介意哈~~{:4_190:}

朵拉 发表于 2023-8-28 15:41

亦是金 发表于 2023-8-28 11:29
好制作！欣赏了！

谢谢金老师的欣赏~~{:4_190:}

朵拉 发表于 2023-8-28 15:47

马黑黑 发表于 2023-8-28 12:22
这个帖子，清爽干净，欣赏

找了这张背景图和两颗爱心 还蛮搭的，谢谢马师欣赏{:4_190:}

马黑黑 发表于 2023-8-28 17:08

朵拉 发表于 2023-8-28 15:47
找了这张背景图和两颗爱心 还蛮搭的，谢谢马师欣赏

{:4_199:}
页: [1]
查看完整版本: 请恋爱吧（马黑黑原创）