[灌水] AM

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

00:00 00:00

马黑黑 · 发表于 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>