马黑黑 发表于 2022-5-21 20:45

兰陵王入阵曲代码解释

创意：

血腥的场景，离不开红色系。原图的旌旗有红色元素，再把远处的天空与山的一部分渲染成些微的红色就差不多了，然后音乐进度与控制按钮也弄成红色的，加持一些血腥的创意，应该就比较符合主题了。

实现：

图片做背景，配合以深红色线性渐变，用multiply背景滤镜渲染图片，具体做法是渐变的上边是深红色、下边透明。

音乐播放进度和控制按钮容易处理：容器是 wrap，简单模拟成试管状，它里面有一个血滴，自上往下流动——流动的速度与音乐播放的进度同步。血滴有一个伪元素，显示百分比进度，本来想做成水壶状的或杯子的样子，想想算了，让它保持原状，像面旗子也好。

代码：
<style>
.mama {
        left: -280px;
        width: 1156px;
        height: 799px;
        background-image: linear-gradient(darkred, transparent), url('/data/attachment/forum/202205/21/191016sjn3enonw11jjvv3.jpg');
        background-blend-mode:multiply, normal;
        position: relative;
}
.wrap {
        display: flex;
        justify-content: center;
        width: 25px; height: 215px;
        bottom: 10px; left: 10px;
        background: rgba(255,0,0,.35);
        border-radius: 10px;
        cursor: pointer;
        position: absolute;
}
.drop {
        position: absolute;
        width:15px;
        height: 15px;
        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
        transform: rotate(-45deg);
        background: darkred;
}
.drop::before{
        position: absolute;
        content: attr(data-per);
        width: 60px; height: 60px;
        left: 25px;
        background: red;
        font: normal 12px / 60px sans-serif;
        text-align: center;
        color: white;
}
</style>

<div class="mama">
        <div class="wrap">
                <div class="drop" data-per="0%"></div>
        </div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1913099379.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let aud = document.querySelector('#aud');
let wrap = document.querySelector('.wrap');
let drop = document.querySelector('.drop');
let task, current;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

wrap.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        drop.style.top = prog * 2 + 'px';
        drop.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>JS部分主要是处理音乐播放进度与控制，和之前的同类的东东大同小异。

加林森 发表于 2022-5-21 21:13

我去看看这个效果是什么的。谢谢老黑了。辛苦啦！{:4_191:}

加林森 发表于 2022-5-21 21:26

老黑的这个制作我看了，真漂亮，有血腥味的。播放器是小方型，不转的吗？

马黑黑 发表于 2022-5-21 21:58

加林森 发表于 2022-5-21 21:26
老黑的这个制作我看了，真漂亮，有血腥味的。播放器是小方型，不转的吗？

不转，不好转动

加林森 发表于 2022-5-21 22:01

马黑黑 发表于 2022-5-21 21:58
不转，不好转动

嗯嗯，明白了。

马黑黑 发表于 2022-5-21 22:01

加林森 发表于 2022-5-21 22:01
嗯嗯，明白了。

也无需啥都转的

加林森 发表于 2022-5-21 22:03

马黑黑 发表于 2022-5-21 22:01
也无需啥都转的

好的，以后制作时会考虑这些的。

马黑黑 发表于 2022-5-21 22:04

加林森 发表于 2022-5-21 22:03
好的，以后制作时会考虑这些的。

多样化挺好

加林森 发表于 2022-5-21 22:07

马黑黑 发表于 2022-5-21 22:04
多样化挺好

就是。

红影 发表于 2022-5-21 22:17

这个制作，在整体氛围控制上，黑黑很用心。最关键这个播放进度振豪，看到了进度条的方式可以有无限创意呢，可以带来很多启发{:4_187:}

马黑黑 发表于 2022-5-21 22:22

红影 发表于 2022-5-21 22:17
这个制作，在整体氛围控制上，黑黑很用心。最关键这个播放进度振豪，看到了进度条的方式可以有无限创意呢， ...

如果不需要显示进度，估计会更好做

红影 发表于 2022-5-21 23:13

马黑黑 发表于 2022-5-21 22:22
如果不需要显示进度，估计会更好做

现在这个也很好啊，可以和音乐互动呢{:4_173:}

马黑黑 发表于 2022-5-21 23:19

红影 发表于 2022-5-21 23:13
现在这个也很好啊，可以和音乐互动呢

都可以互动，没有进度显示也是互动，可以暂停、继续播放

红影 发表于 2022-5-21 23:29

和前一个圆环的相比，这个里面多了drop.style.top = prog * 2 + 'px';不知道这个起什么作用。

马黑黑 发表于 2022-5-21 23:48

红影 发表于 2022-5-21 23:29
和前一个圆环的相比，这个里面多了drop.style.top = prog * 2 + 'px';不知道这个起什么作用。

这是改变血滴的 top 值，血滴才会往下走

红影 发表于 2022-5-22 08:35

马黑黑 发表于 2022-5-21 23:19
都可以互动，没有进度显示也是互动，可以暂停、继续播放

对的，但有进度的时候更直观{:4_204:}

红影 发表于 2022-5-22 08:44

马黑黑 发表于 2022-5-21 23:48
这是改变血滴的 top 值，血滴才会往下走

哦哦，要设定开始走的位置啊，还以为会直接在最上端开始的呢。

马黑黑 发表于 2022-5-22 08:46

红影 发表于 2022-5-22 08:44
哦哦，要设定开始走的位置啊，还以为会直接在最上端开始的呢。

根据播放进度实时更改top值，只要播放，不断更改。有个监听播放器的当前播放时间事件的。

红影 发表于 2022-5-22 10:42

马黑黑 发表于 2022-5-22 08:46
根据播放进度实时更改top值，只要播放，不断更改。有个监听播放器的当前播放时间事件的。

哦，我明白了，这样会让那个旋转后的尖角对着水滴，而不是方块的中心位置{:4_187:}

马黑黑 发表于 2022-5-22 11:53

红影 发表于 2022-5-22 10:42
哦，我明白了，这样会让那个旋转后的尖角对着水滴，而不是方块的中心位置

与尖角无关。尖角那个矩形，是血滴的伪元素，它跟它的宿主运动而已。
页: [1] 2
查看完整版本: 兰陵王入阵曲代码解释