论坛 › 欢乐水吧 › AM

马黑黑 发表于 2023-3-18 07:37

AM

<style> #papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/1/am.jpg') center/cover no-repeat; box-shadow: 8px 4px 30px #333; position: relative; } #mplayer { right:280px; bottom: 40px; width: 200px; height: 100px; color: black; text-shadow: 1px 1px 2px orange; background: gray linear-gradient(to top right,tan,black); box-shadow: 4px 4px 30px black; border-radius: 100px 100px 0 0; border: 6px solid black; display: grid; place-items: end center; cursor: pointer; transform: perspective(2000px) rotateY(-45deg); opacity: .75; position: absolute; --state: paused; --time: 60s; } #mplayer::before, #mplayer::after { position: absolute; content: ''; width: 5px; height: 95px; transform-origin: 50% 100%; } #mplayer::before { background: linear-gradient(to bottom,snow,black,transparent); transform: rotate(-90deg); opacity: .85;
animation: rot var(--time) linear infinite var(--state); --deg: 90deg; } #mplayer::after { background: linear-gradient(to bottom,black 92%, red 0); transform: rotate(-30deg); animation: rot .5s infinite alternate linear var(--state); --deg: 30deg; } .mypic { position: absolute; top: 240px; left: 70px;} @keyframes rot { to { transform: rotate(var(--deg)); } }</style><div id="papa"><div id="mplayer">00:00 &nbsp; 00:00</div> <img class="mypic" src="https://638183.freep.cn/638183/Pic/2022/bee01.gif" alt="" /></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=35504129" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
        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;};
        mplayer.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('canplay', () => mplayer.style.setProperty('--time',aud.duration + 's'));
        aud.addEventListener('timeupdate', () => mplayer.innerHTML = toMin(aud.currentTime) + ' &nbsp; &nbsp; ' +toMin(aud.duration));
})();
</script>

马黑黑 发表于 2023-3-18 07:56

帖子代码<style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/1/am.jpg') center/cover no-repeat;
        box-shadow: 8px 4px 30px #333;
        position: relative;
}
#mplayer {
        right:280px;
        bottom: 40px;
        width: 200px;
        height: 100px;
        color: black;
        text-shadow: 1px 1px 2px orange;
        background: gray linear-gradient(to top right,tan,black);
        box-shadow: 4px 4px 30px black;
        border-radius: 100px 100px 0 0;
        border: 6px solid black;
        display: grid;
        place-items: end center;
        cursor: pointer;
        transform: perspective(2000px) rotateY(-45deg);
        opacity: .75;
        position: absolute;
        --state: paused; --time: 60s;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        width: 5px;
        height: 95px;
        transform-origin: 50% 100%;
}
#mplayer::before {
        background: linear-gradient(to bottom,snow,black,transparent);
        transform: rotate(-90deg);
        opacity: .85;
        animation: rot var(--time) linear infinite var(--state);
        --deg: 90deg;
}
#mplayer::after {
        background: linear-gradient(to bottom,black 92%, red 0);
        transform: rotate(-30deg);
        animation: rot .5s infinite alternate linear var(--state);
        --deg: 30deg;
}
.mypic { position: absolute; top: 240px; left: 70px;}
@keyframes rot {
        to { transform: rotate(var(--deg)); }
}
</style>

<div id="papa">
        <div id="mplayer">00:00   00:00</div>
        <img class="mypic" src="https://638183.freep.cn/638183/Pic/2022/bee01.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35504129" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        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;};
        mplayer.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('canplay', () => mplayer.style.setProperty('--time',aud.duration + 's'));
        aud.addEventListener('timeupdate', () => mplayer.innerHTML = toMin(aud.currentTime) + '   ' +toMin(aud.duration));
})();
</script>

起个网名好难 发表于 2023-3-18 09:28

https://img.72qq.com/file/201510/14/6375c50d3b.jpg

红影 发表于 2023-3-18 09:32

这个节拍器的外形好像又变得瘦长些了呢，漂亮{:4_187:}

红影 发表于 2023-3-18 09:33

如此悠闲的早咖啡和文化的氛围。那个小蜜蜂也很会凑趣{:4_431:}

红影 发表于 2023-3-18 09:34

黑黑的帖子那么靠上，都看不出每人奖励多少次啊{:4_358:}

红影 发表于 2023-3-18 09:35

继续回复，一直到把奖励领完{:4_373:}

红影 发表于 2023-3-18 09:36

反正听着这么悠扬的音乐，在这个帖子里徜徉也是享受{:4_397:}

红影 发表于 2023-3-18 09:36

看起来还有奖励{:4_375:}

红影 发表于 2023-3-18 09:37

我也不管能领多少次了，总要领完为止{:4_196:}

红影 发表于 2023-3-18 09:37

哦，哈哈，领完了{:4_189:}

红影 发表于 2023-3-18 09:39

非常喜欢的背景色，还有小蜜蜂增加了灵动感。这个制作太美了{:4_431:}

梦油 发表于 2023-3-18 09:46

这只小蜜蜂上下翻飞显得很有灵气。

绿叶清舟 发表于 2023-3-18 10:24

一大早看这么多书，文化银啊

马黑黑 发表于 2023-3-18 11:16

绿叶清舟 发表于 2023-3-18 10:24
一大早看这么多书，文化银啊

准备考博

风中飞尘 发表于 2023-3-18 11:18

好漂亮好清新的音乐很搭配赞

马黑黑 发表于 2023-3-18 11:18

风中飞尘 发表于 2023-3-18 11:18
好漂亮好清新的音乐很搭配赞

感谢感谢。{:4_190:}

马黑黑 发表于 2023-3-18 11:19

起个网名好难 发表于 2023-3-18 09:28


早

马黑黑 发表于 2023-3-18 11:20

红影 发表于 2023-3-18 09:32
这个节拍器的外形好像又变得瘦长些了呢，漂亮

人家是立体的，perspective和角度变大了一点就显得小巧一些

马黑黑 发表于 2023-3-18 11:20

红影 发表于 2023-3-18 09:33
如此悠闲的早咖啡和文化的氛围。那个小蜜蜂也很会凑趣

采花大盗{:4_170:}

查看完整版本: AM