红影 发表于 2022-11-25 20:26
这个制作很有韵味，配合着歌词，让人看得如醉如痴。亲爱的制作太美了，真棒
亲爱的，不能和你比的，你的制作太高大上了，我跟不上的
<style>
#papa { margin: 120 0 0 calc(50% - 750px); left: -340px;width: 1280px; height: 650px; background: gray url('https://pic.imgdb.cn/item/6391db2db1fccdcd3629fcfc.jpg') no-repeat center/cover; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#mplayer { position: absolute; width: 60%; height: 160px; bottom: 0; display: flex; place-items: end; }
.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 10px; background: gray linear-gradient(to top,darkgreen,green,lightgreen); transition: height .45s; }
.mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: pink; top: -4px; }
.tit { position: absolute; top: 100px; font: bold 3em sans-serif; color: hsla(90,50%,50%,.3); text-shadow: 1px 1px 2px #000, -5px -5px 10px snow, 5px 5px 10px snow; animation: flash 3s infinite alternate linear; }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
</style>
<div id="papa">
<div class="tit">花心【Hana】</div>
<div id="mplayer"></div>
<audio id="aud" src="https://yinhua.ru/20221125/yy/Hana .mp3" loop autoplay></audio>
</div>
<script>
(function() {
ypData = ;
let total = Math.ceil(mplayer.offsetWidth / 6);
let cNum = 0;
for(j=0; j<total; j++) {
let el = document.createElement('span');
el.className = 'mLine';
el.style.height = Math.floor(Math.random()* 100) + 'px';
mplayer.appendChild(el);
}
let lines = document.querySelectorAll('.mLine');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
cNum ++;
if(cNum >= ypData.length) cNum = 0;
setPinpu(cNum);
});
function setPinpu(num) {
let data = ypData;
for(j=0; j<total; j++) {
lines.style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *50) + 'px';
}
}
})();
</script>
<br><br><br><br><br>
小辣椒 发表于 2022-11-25 21:20
这个也是加进我的最爱播放器里面
又多一个？
小辣椒 发表于 2022-11-25 21:19
黑黑我换了深蓝的，你看看怎么样
感觉这样同色系的更美丽了
马黑黑 发表于 2022-11-25 21:36
又多一个？
怎么样，这个小播比较精致，小巧玲珑
马黑黑 发表于 2022-11-25 21:38
感觉这样同色系的更美丽了
我也是感觉比刚才的好一点
小辣椒 发表于 2022-11-25 21:53
我也是感觉比刚才的好一点
其实都好
小辣椒 发表于 2022-11-25 21:52
怎么样，这个小播比较精致，小巧玲珑
对，不用那么大的，要尽量照顾帖子的其他主元素
小辣椒 发表于 2022-11-25 21:18
晚上好，谢谢梦油欣赏
梅花欢喜漫天雪，欣赏辣椒作品美。
马黑黑 发表于 2022-11-25 23:12
其实都好
黑黑夸奖 鼓励的多一点，小辣椒要加油！
马黑黑 发表于 2022-11-25 23:13
对，不用那么大的，要尽量照顾帖子的其他主元素
是啊，其实播放器占位置太多也是要看场景的，不能每个都加大
小辣椒 发表于 2022-11-26 12:58
是啊，其实播放器占位置太多也是要看场景的，不能每个都加大
{:4_181:}
梦油 发表于 2022-11-26 10:04
梅花欢喜漫天雪，欣赏辣椒作品美。
谢谢梦油，你的支持和鼓励是小辣椒学习的动力{:4_204:}
小辣椒 发表于 2022-11-26 12:57
黑黑夸奖 鼓励的多一点，小辣椒要加油！
{:5_112:}
马黑黑 发表于 2022-11-26 12:59
黑黑在啊，我中午上来看看{:4_189:}
马黑黑 发表于 2022-11-26 12:59
哈哈，这个我没说错的
小辣椒 发表于 2022-11-26 13:01
哈哈，这个我没说错的
你说的错对都是对
小辣椒 发表于 2022-11-26 13:00
黑黑在啊，我中午上来看看
我整理了另外两个插件，还有一个测试完发，然后休息
马黑黑 发表于 2022-11-26 13:03
你说的错对都是对
没有这个道理的{:4_170:}
小辣椒 发表于 2022-11-26 13:04
没有这个道理的
道理你说有就有
马黑黑 发表于 2022-11-26 13:04
道理你说有就有
真的啊，那你太喜欢胖了，明明我都是听你的{:4_203:}