论坛 › 音乐沙龙 › 古韵悠悠（学习黑黑《宇宙基地》多曲音乐）

红影 发表于 2025-2-25 10:56

古韵悠悠（学习黑黑《宇宙基地》多曲音乐）

<style>
        @import 'https://638183.freep.cn/638183/web/mod/mp3splayer.css';
        #tz { margin: 60px 0 30px calc(50% - 583px); background: SaddleBrown; overflow: hidden; }
        #mplayer { --yy: 200px; --color1: snow; --color2: red; background: #dbc81a; top: 300px; left: 430px; }
        #mplayer img { filter: invert(100%); }
        #fsbtn { bottom: 15px; color: white; border: 1px solid #dbc81a; }
        .vid {webkit-mask: radial-gradient(red 100%, transparent 0);
        -webkit-mask: radial-gradient(red 100%, transparent 0); }
       .pTitle {
    width: 80%;
    height: 1em;
    line-height: 2em;
    color: transparent;
    font-family: SimHei, NSimSun, 'Microsoft YaHei';
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    z-index: 10;
    position: absolute;
    left: -110px;
    top: 30px;
}

.sp {
    animation: flashTitle 6s linear infinite;
}

.pTitle span:nth-child(1) {
    animation-delay: 0s;
}

.pTitle span:nth-child(2) {
    animation-delay: 0.5s;
}

.pTitle span:nth-child(3) {
    animation-delay: 1.0s;
}

.pTitle span:nth-child(4) {
    animation-delay: 1.5s;
}

.pTitle span:nth-child(5) {
    animation-delay: 2.0s;
}

.pTitle span:nth-child(6) {
    animation-delay: 2.5s;
}

.pTitle span:nth-child(7) {
    animation-delay: 3.0s;
}

.pTitle span:nth-child(8) {
    animation-delay: 3.5s;
}

.pTitle span:nth-child(9) {
    animation-delay: 4.0s;
}

@keyframes flashTitle {

    0%,
    100% {
      color: white;
      text-shadow: 2px 2px 20px coral, 2px 2px 30px Orange, 2px 2px 40px Orange, 2px 2px 50px Orange, 2px 2px 60px Orange, 2px 2px 70px Orange, 2px 2px 80px coral;
    }

    30%,
    90% {
      color: transparent;
      text-shadow: none;
    }
}
</style>

<div id="tz" class="pa">
        <video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/70/V-137097-0D3EAA1D.mp4" autoplay loop muted></video>
       <div class="pTitle">
    <span class="sp">才</span>
    <span class="sp">有</span>
    <span class="sp">梅</span>
    <span class="sp">花</span>
    <span class="sp">便</span>
    <span class="sp">不</span>
    <span class="sp">同</span>
</div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3splayer.js';
        var musics = [
                ['https://music.163.com/song/media/outer/url?id=304901.mp3','静水流深'],
                ['https://music.163.com/song/media/outer/url?id=304903.mp3','星光琴语'],
                ['https://music.163.com/song/media/outer/url?id=304905.mp3','心游太玄'],
                ['https://music.163.com/song/media/outer/url?id=304907.mp3','秋风过耳'],
                ['https://music.163.com/song/media/outer/url?id=304908.mp3','四季轮回'],
                ['https://music.163.com/song/media/outer/url?id=304910.mp3','镜湖自照'],
                ['https://music.163.com/song/media/outer/url?id=304911.mp3','琴道禅悟'],
                ['https://music.163.com/song/media/outer/url?id=304913.mp3','雁南渡'],
                ['https://music.163.com/song/media/outer/url?id=304915.mp3','远树含烟'],
                ['https://music.163.com/song/media/outer/url?id=304917.mp3','秋雨不成珠'],
        ];
        hcplay(tz,null,musics);
</script>

红影 发表于 2025-2-25 10:58

寻常一样窗前月,才有梅花便不同。

再套用个@马黑黑 多曲的，还套用了@起个网名好难 的逐字文字展示{:4_173:}

红影 发表于 2025-2-25 10:59

下午要外出了，好多没来得及回复，先撤了{:4_193:}

梦油 发表于 2025-2-25 11:01

字幕的逐渐出现太美了，

朵拉 发表于 2025-2-25 11:22

精品之作，欣赏咯{:4_204:}

梦江南 发表于 2025-2-25 11:26

好美的图图，字幕的逐渐出现更加美了！{:4_187:}

起个网名好难 发表于 2025-2-25 12:05

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

起个网名好难 发表于 2025-2-25 12:09

红影 发表于 2025-2-25 10:58
寻常一样窗前月,才有梅花便不同。

再套用个@马黑黑 多曲的，还套用了@起个网名好难 的逐字文字展示{:4_1 ...

不敢掠人之美，我是从这帖里学来的

马黑黑 发表于 2025-2-25 14:29

播放器设置了配套帖子的颜色和位置，挺好

杨帆 发表于 2025-2-25 19:59

学有所成，谢谢影子精彩分享{:4_204:}

小辣椒 发表于 2025-2-25 20:16

亲爱的，你速度的，非常的漂亮，{:4_199:}

小辣椒 发表于 2025-2-25 20:17

这个视频背景加的很好，场景有了仙气了{:4_205:}

小辣椒 发表于 2025-2-25 20:17

配了文字，也是有特别{:4_199:}

小辣椒 发表于 2025-2-25 20:18

欣赏亲爱的精美制作，大赞~~~{:4_178:}

红影 发表于 2025-2-25 20:37

梦油 发表于 2025-2-25 11:01
字幕的逐渐出现太美了，

那个是套用的{:4_173:}

红影 发表于 2025-2-25 20:37

朵拉 发表于 2025-2-25 11:22
精品之作，欣赏咯

谢谢朵宝鼓励{:4_187:}

红影 发表于 2025-2-25 20:39

梦江南 发表于 2025-2-25 11:26
好美的图图，字幕的逐渐出现更加美了！

这个没放背景图，直接用的视频效果{:4_173:}

红影 发表于 2025-2-25 20:39

起个网名好难 发表于 2025-2-25 12:05


谢谢难难{:4_187:}

红影 发表于 2025-2-25 20:40

起个网名好难 发表于 2025-2-25 12:09
不敢掠人之美，我是从这帖里学来的

要不是难难使用，我都没注意这个，当时光是听歌了{:4_173:}

红影 发表于 2025-2-25 20:41

马黑黑 发表于 2025-2-25 14:29
播放器设置了配套帖子的颜色和位置，挺好

好像只有这个位置恰当点，就移动了一下{:4_173:}

查看完整版本: 古韵悠悠（学习黑黑《宇宙基地》多曲音乐）