兰陵王入阵曲代码解释

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

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

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

x

创意：

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

实现：

图片做背景，配合以深红色线性渐变，用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>