论坛 › 音乐沙龙 › 兰陵王入阵曲

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

兰陵王入阵曲

<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>

红影 发表于 2022-5-21 19:49

黑黑又换了一种按钮了，那个小点点像是倒出的一滴血，跟主题很呼应呢{:4_187:}

大猫咪 发表于 2022-5-21 19:57

真漂亮，音乐图片融合的真棒！老黑这是要准备攻城略地啊{:4_187:}{:5_117:}晚上好 {:4_191:}

红影 发表于 2022-5-21 19:57

兰陵王，中国古代王爵，是郡王爵，其中最出名的是北齐文襄帝高澄第四子高长恭。其他皇朝也有封兰陵王的人，其中辽国封兰陵王的人比较多，分别有萧韩家奴、萧挞凛、萧排押、萧恒德、萧匹敌、萧宁、萧酬斡、萧挞不也、萧朴、萧兀纳、萧速撒、萧得里底、萧奉先、萧安团、丁振等15人。

高长恭（？—573年），本名高肃，族名高孝瓘，字长恭，渤海郡蓨县（今河北省景县）人。北齐宗室、名将，神武帝高欢的孙子，文襄帝高澄第四子，中国古代四大美男之一。

高长恭在军事上的成就在于他参与了北齐后期与北周的历次大战， 并数次击退北周进攻。河清二年（563年）的次年十二月，邙山之战时，高长恭带领五百名骑兵冲进北周军队的包围圈，成功替金墉解围，根据《北齐书》的记载，这次战役后，高长恭开始声名远扬，士兵们为此作曲讴歌他，即后来知名的《兰陵王入阵曲》。

红影 发表于 2022-5-21 20:01

原来这个曲子是这么来的。

兰陵王高长恭性格勇武而貌美似女人，他觉得自己相貌不能够威慑敌人，于是雕刻了木制的假面，打仗时就戴上。后来经常戴着面具来对付敌人，曾经在金墉城下攻打北周的军队，勇冠三军，北齐人都称颂他的勇壮，为此创作舞蹈来效仿他指挥击刺的姿态，称作《兰陵王入阵曲》。这也是古代乐舞《大面》的由来。

美男子哎，又英勇善战又样貌俊美，这样的男子世上难寻{:4_173:}

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

红影 发表于 2022-5-21 19:49
黑黑又换了一种按钮了，那个小点点像是倒出的一滴血，跟主题很呼应呢

这是特意设计的，做的有点匆忙

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

大猫咪 发表于 2022-5-21 19:57
真漂亮，音乐图片融合的真棒！老黑这是要准备攻城略地啊晚上好

晚上好。你要参战吗

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

红影 发表于 2022-5-21 19:57
兰陵王，中国古代王爵，是郡王爵，其中最出名的是北齐文襄帝高澄第四子高长恭。其他皇朝也有封兰陵王的人， ...
涨知识了吧，至少认得一个美男子

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

红影 发表于 2022-5-21 20:01
原来这个曲子是这么来的。

兰陵王高长恭性格勇武而貌美似女人，他觉得自己相貌不能够威慑敌人，于是雕刻 ...

瞧，四川的变脸面具，跟这个有木有关系？

大猫咪 发表于 2022-5-21 20:12

马黑黑 发表于 2022-5-21 20:03
晚上好。你要参战吗

加入黑黑站队 {:4_189:}

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

大猫咪 发表于 2022-5-21 20:12
加入黑黑站队

1方的收入

大猫咪 发表于 2022-5-21 20:15

马黑黑 发表于 2022-5-21 20:13
1方的收入

{:5_117:}就这么定了

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

马黑黑 发表于 2022-5-21 20:02
这是特意设计的，做的有点匆忙

各种进度按钮被黑黑玩得出神入化，太佩服了{:4_199:}

红影 发表于 2022-5-21 20:19

马黑黑 发表于 2022-5-21 20:03
涨知识了吧，至少认得一个美男子

而且是这么厉害的美男子，他真是上天的宠儿啊。

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

红影 发表于 2022-5-21 20:19
而且是这么厉害的美男子，他真是上天的宠儿啊。

嗯。刀郎也写有一些和这个有关的音乐，云朵唱的叫啥来着，也挺好的

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

红影 发表于 2022-5-21 20:17
各种进度按钮被黑黑玩得出神入化，太佩服了

卖猪肉要会数数，会数数就会编程。仅此而已。

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

大猫咪 发表于 2022-5-21 20:15
就这么定了

这是底金，表现英勇还加的

红影 发表于 2022-5-21 20:32

马黑黑 发表于 2022-5-21 20:05
瞧，四川的变脸面具，跟这个有木有关系？

不知道啊，可能也是因为这个而流传下来的？黑黑的想象很丰富{:4_173:}

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

红影 发表于 2022-5-21 20:32
不知道啊，可能也是因为这个而流传下来的？黑黑的想象很丰富

搞猪猪研究，多少有点联想能力{:4_170:}

来看你 发表于 2022-5-21 20:35

瞬间进入古战场 {:4_199:}

查看完整版本: 兰陵王入阵曲