红影 发表于 2023-8-15 20:56

《山歌寥哉 -序曲》刀郎（学习黑黑磁带播放器效果）


<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 1019px; background: url('https://pic.imgdb.cn/item/64db20be1ddac507cc29a7cf.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#wenzi {
        position: absolute;
        left: 750px;
        top: 150px;
        opacity: .65;
        z-index: 10;
}
.mpic1 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: .35;
      background: url('https://pic.imgdb.cn/item/61b2bf402ab3f51d9144a074.gif'); }
</style>
<div id="papa">
<div class="mpic1"></div>
<svg id="wenzi" width="700px" height="600px" style="user-select: none;">
      <text x="10" y="30" font-family="MicrosoftYahei" font-weight="900" font-size="22" stroke-width="2" stroke="none" fill="snow" dy="6 12 9 0 -8 -14 5">
                九州山歌何寥哉
      </text>
      <text x="10" y="70" font-family="MicrosoftYahei" font-weight="900" font-size="22" stroke-width="2" stroke="none" fill="snow" dy="6 12 9 0 -8 -14 5">
                一呼九野声慷慨
      </text>
      <text x="10" y="110" font-family="MicrosoftYahei" font-weight="900" font-size="22" stroke-width="2" stroke="none" fill="snow" dy="6 12 9 0 -7 -14 5">
               犹记世人多悲苦
      </text>
      <text x="10" y="150" font-family="MicrosoftYahei" font-weight="900" font-size="22" stroke-width="2" stroke="none" fill="snow" dy="6 12 9 0 -7 -14 5">
                清早出门暮不归
      </text>
</svg>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/08/02/ced53f2567232f71e422e84d6925bb5e.mp3" autoplay="" loop=""></audio>

<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/tape_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);

(function() {
let geci = [ ];

script.onload = () => {
      HCPlayer({
            papa: '#papa',
            lrcAr: geci,
            lrc_css: `
                top: -120px;
                color: #999;
                --bg: linear-gradient(rgba(250,250,250,.25),rgba(138,64,30,.65));
            `,
            player_css: `
                top: 19%;
                left: 49%;
                color: snow;
                z-index: 100;
               --track: silver;
                --prog: black;
            `,
            fs_css: `bottom: -100px; --bg: #333; --color: white;`,
            title: '刀郎 -山歌寥哉 -序曲',
      });
    };
})();
</script>

醉美水芙蓉 发表于 2023-8-15 20:57

红影 发表于 2023-8-15 20:59

这个就四句歌词，觉得没必要放歌词里了，就想着弄个文字放上吧。
然后跑到黑黑的文字仓库大宝库里找，看到这个错落有致，觉得跟龙的形状有相似之处，赶紧用上了。
嗯，每次做帖顺便学习文字宝库，也是不错的事，正确把那里的文字效果都用一遍@马黑黑{:4_173:}

红影 发表于 2023-8-15 21:00

图片来自网络，代码来自黑黑，谢谢黑黑的代码。就让那条龙抓着磁带来了{:4_173:}

红影 发表于 2023-8-15 21:02

用了黑黑网站里代码的颜色，的确这个颜色更好些，自己就不去配色了{:4_173:}

红影 发表于 2023-8-15 21:04

这个图图纵向太大，无法全屏，全屏后上下都没了，所以就把全屏按黑黑教的移动到外面去了。
同理，因为不使用歌词了，所以把歌词也移出去了。

马黑黑 发表于 2023-8-15 21:28

设计很精妙

红影 发表于 2023-8-15 22:20

醉美水芙蓉 发表于 2023-8-15 20:57
欣赏红影美贴！

水芙蓉美女回复这么快啊，都没注意你就回复完了{:4_173:}

红影 发表于 2023-8-15 22:22

马黑黑 发表于 2023-8-15 21:28
设计很精妙

谢谢黑黑的代码，这个磁带效果真好看{:4_187:}

小辣椒 发表于 2023-8-15 22:55

亲爱的，图图非常有气势，音乐也是的，很震撼{:4_199:}

小辣椒 发表于 2023-8-15 22:55

黑黑今天的捞磁带播放器用上了，速度的{:4_178:}

小辣椒 发表于 2023-8-15 22:58

这个背景没有用视频吧，整天画面已经很霸气了

小辣椒 发表于 2023-8-15 22:59

古代人配大龙，是什么意思，勤劳致富？大龙保佑

小辣椒 发表于 2023-8-15 23:00

这些文字第一次看见，是黑黑的代码编辑的吗

红影 发表于 2023-8-15 23:20

小辣椒 发表于 2023-8-15 23:00
这些文字第一次看见，是黑黑的代码编辑的吗

是啊，是黑黑文字仓库里的效果，发现那里还有没做过的效果，正好这个帖子用上了{:4_173:}

马黑黑 发表于 2023-8-15 23:21

红影 发表于 2023-8-15 22:22
谢谢黑黑的代码，这个磁带效果真好看

还不错的吧

红影 发表于 2023-8-15 23:21

小辣椒 发表于 2023-8-15 22:59
古代人配大龙，是什么意思，勤劳致富？大龙保佑

不知道啊，从网上找的一张图图，估计似描述山歌寥哉场景的{:4_173:}

红影 发表于 2023-8-15 23:22

小辣椒 发表于 2023-8-15 22:58
这个背景没有用视频吧，整天画面已经很霸气了

这个没用视屏，省的你看不到啊{:4_173:}

红影 发表于 2023-8-15 23:22

小辣椒 发表于 2023-8-15 22:55
亲爱的，图图非常有气势，音乐也是的，很震撼

这个是刀郎那个专辑里的第一首，看到大家都在做刀郎的歌，我也跟着凑趣{:4_173:}

红影 发表于 2023-8-15 23:32

马黑黑 发表于 2023-8-15 23:21
还不错的吧

磁带效果好，那个文字效果也好，我从文字仓库里翻出来的，正好这里用上{:4_173:}
页: [1] 2 3 4 5 6 7
查看完整版本: 《山歌寥哉 -序曲》刀郎（学习黑黑磁带播放器效果）