鸟语歌（学习套用黑黑AM播放器效果）
<style>#papa {
margin: 120px 0 0 calc(50% - 710px);
width: 1238px;
height: 680px;
background: lightblue url('https://wj.zp68.com/lxx/yunhua/2023/03/19/39.gif') center/cover no-repeat;
box-shadow: 8px 4px 30px #333;
position: relative;
}
#mplayer {
right:40%;
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: 700px;}
.mypic1 { position: absolute; top: 100px; left: 820px;}
@keyframes rot {
to { transform: rotate(var(--deg)); }
}
</style>
<div id="papa">
<div id="mplayer">00:00 00:00</div>
<img class="mypic" src="https://wj.zp68.com/lxx/yunhua/2023/03/19/rw.gif" alt="" />
<img class="mypic1" src="https://wj.zp68.com/lxx/yunhua/2023/03/19/bt.png
" alt="" />
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/03/19/Man.mp3" 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-19 20:33
@走过岁月
岁月这个重低音震撼电音嗨曲的粒子弹跳效果特别漂亮，音乐我没有用，换了首音乐上去。
这个音乐也可以 音乐节奏跟频谱也般配 走过岁月 发表于 2023-3-19 20:37
这个音乐也可以
我感觉这个节奏感强一点 走过岁月 发表于 2023-3-19 20:38
音乐节奏跟频谱也般配
这个动图我做了2个，还有一个加了其他频谱我感觉不好看，还是这个简单一点漂亮 加个动感美女不错，小辣椒很棒 走过岁月 发表于 2023-3-19 20:42
加个动感美女不错，小辣椒很棒
主要加点色彩 这个音乐的节奏感很强。 这个漂亮。亲爱的真快，把岁月的粒子效果和黑黑的播放器都用上去了呢，还加了自己的好多动态元素，又热烈又欢快{:4_199:} 小辣椒 发表于 2023-3-19 20:40
我感觉这个节奏感强一点
嗯 小辣椒 发表于 2023-3-19 20:42
这个动图我做了2个，还有一个加了其他频谱我感觉不好看，还是这个简单一点漂亮
这个不错 小辣椒 发表于 2023-3-19 20:43
主要加点色彩
加了画面更动感了 走过岁月 发表于 2023-3-19 20:44
这个不错
今天你发的那个粒子也是很喜欢的{:4_189:} 梦油 发表于 2023-3-19 20:43
这个音乐的节奏感很强。
哈哈，梦油好。这个是动感音乐{:4_208:} 小辣椒 发表于 2023-3-19 20:45
今天你发的那个粒子也是很喜欢的
有空也做 红影 发表于 2023-3-19 20:43
这个漂亮。亲爱的真快，把岁月的粒子效果和黑黑的播放器都用上去了呢，还加了自己的好多动态元素，又热烈又 ...
这个黑黑的指针播放器效果和岁月这个图图很相配我就做了 走过岁月 发表于 2023-3-19 20:43
嗯
我一直喜欢这首音乐的{:4_208:} 小辣椒 发表于 2023-3-19 20:47
我一直喜欢这首音乐的
嗯，好听