论坛 › 马黑黑教程专版 › 改进版小频谱（小白帽+倒影）

马黑黑 发表于 2022-6-3 15:35

改进版小频谱（小白帽+倒影）

<style>

.outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: #ccc linear-gradient(rgba(100,26,210,.75),rgba(25,175,100,.65)); }
.mama { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; cursor: pointer; }
.wrap { width: 96px; height: 80px; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15)); display: flex; align-items: flex-end; gap: 4px; }
.wrap span { width: 6px; height: 60px; background-color: rgba(255,0,0,.6); display: block; position: relative; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.mama meter { width: 96px; position: absolute; bottom: -4px;}
@keyframes up { from { top: -3px;} to { top: -16px; } }

</style>

<div class="outer">
        <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        </div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/02/abf40da9a702bb249811e7d47ac25f91.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 10}).forEach((ele) => {
        ele = document.createElement('span');
        ele.className = 'sskey';
        ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
        wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
        })
        meter.value = prog(aud.duration, aud.currentTime);
})

</script>

马黑黑 发表于 2022-6-3 15:36

<style>

.outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: #ccc linear-gradient(rgba(100,26,210,.75),rgba(25,175,100,.65)); }
.mama { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; cursor: pointer; }
.wrap { width: 96px; height: 80px; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15)); display: flex; align-items: flex-end; gap: 4px; }
.wrap span { width: 6px; height: 60px; background-color: rgba(255,0,0,.6); display: block; position: relative; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.mama meter { width: 96px; position: absolute; bottom: -4px;}
@keyframes up { from { top: -3px;} to { top: -16px; } }

</style>

<div class="outer">
        <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        </div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/02/abf40da9a702bb249811e7d47ac25f91.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 10}).forEach((ele) => {
        ele = document.createElement('span');
        ele.className = 'sskey';
        ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
        wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
        })
        meter.value = prog(aud.duration, aud.currentTime);
})

</script>

马黑黑 发表于 2022-6-3 15:36

本帖最后由 马黑黑 于 2022-6-3 15:49 编辑

说明：

一、.wrap 选择器改用 flex 弹性布局并加入 align-items: flex-end 固定子元素的Y轴 ，这样它可以极好地规范了子元素 span 定位在其底部，同时通过 gap: 4px; 来定义子元素彼此间的间隔（4px可以更改为其他值）。
二、flex布局的采用解决了频谱底盘不动的问题，又解决了频谱栅栏的横向定位，故而原来一系列的 nth-child 定义可以统统删掉，减少了代码量，CSS变量也可以不要了，简化了代码。

三、wrap 的宽度与 meter的尺寸及定位，在更改相关数值是仍需留意。

加林森 发表于 2022-6-3 16:34

好的，又有改进版出来啦。{:4_199:}

加林森 发表于 2022-6-3 16:55

老黑我已经制作出来一个，你帮着看看。谢谢！

醉美水芙蓉 发表于 2022-6-3 18:42

小辣椒 发表于 2022-6-3 19:24

黑黑的改进版出来了，我前面都没有做的{:4_203:}

红影 发表于 2022-6-3 19:25

这个好，直接用gap: 4px;，就直接得到了间隙，不需要一个个去设置数值了{:4_199:}

红影 发表于 2022-6-3 19:27

又小白帽在，无论在什么底板上，无论那些小跳会随机出现什么颜色，都会知道有跳跃的小条的存在{:4_187:}

红影 发表于 2022-6-3 19:28

我在本地做了个nth-child 定义的，一个个去加，虽然很麻烦，倒也弄出来了{:4_173:}

马黑黑 发表于 2022-6-3 20:00

红影 发表于 2022-6-3 19:28
我在本地做了个nth-child 定义的，一个个去加，虽然很麻烦，倒也弄出来了

知道的

马黑黑 发表于 2022-6-3 21:45

红影 发表于 2022-6-3 19:25
这个好，直接用gap: 4px;，就直接得到了间隙，不需要一个个去设置数值了

flex弹性布局还是可以挖掘的，开始我没想到用它

马黑黑 发表于 2022-6-3 21:45

醉美水芙蓉 发表于 2022-6-3 18:42
进来欣赏黑黑老师新作品！

{:4_190:}

马黑黑 发表于 2022-6-3 21:46

小辣椒 发表于 2022-6-3 19:24
黑黑的改进版出来了，我前面都没有做的

将来做的时候可以考虑这个，比较容易控制

小辣椒 发表于 2022-6-3 21:50

马黑黑 发表于 2022-6-3 21:46
将来做的时候可以考虑这个，比较容易控制

好的，这个也是很漂亮的

马黑黑 发表于 2022-6-3 21:58

小辣椒 发表于 2022-6-3 21:50
好的，这个也是很漂亮的

过得去的

查看完整版本: 改进版小频谱（小白帽+倒影）