梦江南 发表于 2025-5-2 14:03

回TO樵歌老师 （套用影子的代码）

本帖最后由 梦江南 于 2025-5-3 17:47 编辑 <br /><br /><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: #87CEFA; 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%,
    90% {
      color: white;
    text-shadow: 2px 2px 20px Cyan, 2px 2px 30px Aqua, 2px 2px 30px DeepSkyBlue, 2px 2px 50px DeepSkyBlue, 2px 2px 40px DeepSkyBlue, 2px 2px 50px Aqua, 2px 2px 60px Cyan;
    }

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

<div id="tz" class="pa">
        <video class="vid" src="https://file.uhsea.com/2505/74a4286a47e22d1552851871bcba12e3MR.mp4" autoplay loop muted></video>
       <div class="pTitle">
    <span class="sp">回</span>
    <span class="sp">T</span>
    <span class="sp">O</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://cccimg.com/view.php/ffe9580b95a1fc1a88049fc2707f0d97.m4a','可可托海牧羊人TO梦江南'],
                ['https://file.uhsea.com/2501/363591218ca921c0880c51b9557e8e4cXZ.m4a','莫斯科郊外的晚上'],
                ['https://file.uhsea.com/2502/008c193ba55870816f4a2705bf11b35fFW.m4a','一个真实的故事TO 自己'],
['https://wj1.zp68.com:812/qg01/2025/%E6%A2%A8%E8%8A%B1%E9%A2%82_%E5%B7%B4%E9%98%B3(1).m4a','梨花颂TO花潮女神们节日快乐'],
['https://wj1.zp68.com:812/qg01/2025/%E6%9C%89%E7%94%9F%E4%B9%8B%E6%81%8B_%E5%B7%B4%E9%98%B3.m4a ','答谢朋友们'],
['https://wj1.zp68.com:812/qg01/2025/%E5%9C%A8%E6%B0%B4%E4%B8%80%E6%96%B9_%E5%B7%B4%E9%98%B3.m4a','在水一方'],
['https://wj1.zp68.com:812/qg01/2025/%E7%9B%B8%E9%80%A2%E6%98%AF%E9%A6%96%E6%AD%8C_%E5%B7%B4%E9%98%B3.m4a','相逢是首歌'],
               
        ];
        hcplay(tz,null,musics);
</script>

梦江南 发表于 2025-5-2 14:03

樵歌老师，不好意思，只用了7首老师唱的歌。
祝樵歌老师五一快乐！

小辣椒 发表于 2025-5-2 14:24

阿姨这个制作真漂亮，视频背景做的真好

小辣椒 发表于 2025-5-2 14:24

欣赏樵哥哥的精彩演绎，首首好听{:4_208:}

小辣椒 发表于 2025-5-2 14:26

阿姨你这个播放器可以修改一下和底图差不多的颜色，会更加完美

小辣椒 发表于 2025-5-2 14:27

可能播放器颜色你是想配出来标题字的颜色吧？这样看也是可以的

小辣椒 发表于 2025-5-2 14:28

樵哥哥收礼开心@樵歌

红影 发表于 2025-5-2 14:58

原来还都是师兄的翻唱呢，太好了，可以一下子欣赏很多樵歌的歌曲了{:4_199:}

红影 发表于 2025-5-2 15:01

也不是我的代码啊，我也是套用的呢。{:4_173:}
江南辛苦了，背景里还有樵歌的唱歌动态呢，这个制作太棒了{:4_199:}

红影 发表于 2025-5-2 15:05

樵歌的礼物才送出没多久，江南的回礼就来了，说明一直在惦记着呢，江南真是个有心人{:4_187:}

红影 发表于 2025-5-2 15:21

去看了一下，#mplayer { --yy: 200px; --color1: snow; --color2: red; background: #dbc81a; top: 300px; left: 430px; }这个就是配播放器列表颜色的，color1是文字底色，color2高亮色，background就是整个播放器底板颜色。江南可以配上自己喜欢的颜色了。
我大致试了一下：#mplayer { --yy: 200px; --color1: snow; --color2: DarkBlue; background: SkyBlue; top: 300px; left: 430px; }只改了这两个就觉得挺好看了

红影 发表于 2025-5-2 15:22

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;是配标题字颜色的，就两种颜色的组成。
我也大致配了一下，好像这样text-shadow: 2px 2px 20px Cyan, 2px 2px 30px DeepSkyBlue, 2px 2px 40px DeepSkyBlue, 2px 2px 50px DeepSkyBlue, 2px 2px 60px DeepSkyBlue, 2px 2px 70px DeepSkyBlue, 2px 2px 80px Cyan;也挺好看，当然江南还可以调成别的。

梦江南 发表于 2025-5-2 15:24

小辣椒 发表于 2025-5-2 14:24
阿姨这个制作真漂亮，视频背景做的真好

下午问好，谢谢小辣椒欣赏支持。{:4_187:}

梦江南 发表于 2025-5-2 15:32

小辣椒 发表于 2025-5-2 14:24
欣赏樵哥哥的精彩演绎，首首好听

樵歌老师的歌曲地址好像不是MP3，没把握，所以只选了7首。

梦江南 发表于 2025-5-2 15:54

小辣椒 发表于 2025-5-2 14:26
阿姨你这个播放器可以修改一下和底图差不多的颜色，会更加完美

我是想最好是同色，播放器颜色好改，标题字难改。{:4_201:}

梦江南 发表于 2025-5-2 15:56

小辣椒 发表于 2025-5-2 14:27
可能播放器颜色你是想配出来标题字的颜色吧？这样看也是可以的

想是这样想的，就是不会改。

梦江南 发表于 2025-5-2 15:56

小辣椒 发表于 2025-5-2 14:27
可能播放器颜色你是想配出来标题字的颜色吧？这样看也是可以的

还是同色好看点。

梦江南 发表于 2025-5-2 15:57

红影 发表于 2025-5-2 14:58
原来还都是师兄的翻唱呢，太好了，可以一下子欣赏很多樵歌的歌曲了

谢谢影子分享支持。{:4_187:}

梦江南 发表于 2025-5-2 16:00

红影 发表于 2025-5-2 15:01
也不是我的代码啊，我也是套用的呢。
江南辛苦了，背景里还有樵歌的唱歌动态呢，这个制作太棒了{ ...

反正我是套用您的代码，算是您的了。{:4_173:}

红影 发表于 2025-5-2 16:02

梦江南 发表于 2025-5-2 15:57
谢谢影子分享支持。

那个text-shadow:江南少复制了个字母t，变成ext-shadow了，文字的阴影就没了{:4_173:}
页: [1] 2 3 4 5 6
查看完整版本: 回TO樵歌老师 （套用影子的代码）