有声有色 发表于 2023-8-18 10:06

我的中国心

本帖最后由 有声有色 于 2024-6-25 12:54 编辑 <br /><br /><style>
#papa {margin: 110px -300px; width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/64decc1e661c6c8e542f502c.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: ''; width: 10px; height: 100px; top: 5px; -webkit-box-reflect: below 480px linear-gradient(to bottom, transparent, rgba(255,255,255,.5)); animation: change 10s infinite alternate var(--state); }
#papa::before { left: 5px; background: repeating-linear-gradient(to right,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
#papa::after { right: 5px; background: repeating-linear-gradient(to left,rgba(255,255,255,.4),rgba(255,255,255,.4) 5px,transparent 5px,transparent 10px); }
@keyframes change { to { width: 400px; } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=195373.mp3" autoplay loop></audio>
<script>

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/huakuai_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
    script.onload = () => {
      HCPlayer({
            papa: '#papa',
            lrcAr: geci,
            lrc_css: `
                top: 20px;
                color: lightblue;
                -webkit-box-reflect: below 540px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
                --bg: linear-gradient(rgba(10,200,100,.25),rgba(10,200,100,.7));
            `,
            player_css: `
                top: 100px;
                color: #fff;
                -webkit-box-reflect: below 400px linear-gradient(to bottom, transparent, rgba(255,255,255,.5));
                --track: lightblue;
                --prog: snow;
                --ww: 300px;
                --slider: orange;
            `,
      });
    }
})();

</script>

红影 发表于 2023-8-18 10:39

图中的动态又是有声有色老师自己做的动图吧，很漂亮，歌词同步也很准确，辛苦了。
欣赏有声有色老师好帖{:4_199:}

红影 发表于 2023-8-18 10:41

把JS里的 window.onload = () => {
      HCPlayer({

改成script.onload = () => {
      HCPlayer({

播放器插件出现更快呢，有声有色老师试试？

梦油 发表于 2023-8-18 11:14

又听到了《我的中国心》好高兴啊！谢谢有声有色朋友，分享了。

有声有色 发表于 2023-8-18 11:24

红影 发表于 2023-8-18 10:39
图中的动态又是有声有色老师自己做的动图吧，很漂亮，歌词同步也很准确，辛苦了。
欣赏有声有色老师好帖{: ...

谢谢支持,这是我在网上看到的，用PS试做，做的这条龙还不太像，忘了关于时间轴的问题，我也不知道错在哪里，是否再重做一次，真不行的话我把教材再做一次。

有声有色 发表于 2023-8-18 11:28

红影 发表于 2023-8-18 10:41
把JS里的 window.onload = () => {
      HCPlayer({



谢谢 我改过来了

有声有色 发表于 2023-8-18 11:29

梦油 发表于 2023-8-18 11:14
又听到了《我的中国心》好高兴啊！谢谢有声有色朋友，分享了。

谢谢支持

醉美水芙蓉 发表于 2023-8-18 12:02

有声有色 发表于 2023-8-18 12:11

醉美水芙蓉 发表于 2023-8-18 12:02
老师的制作非常漂亮！

谢谢

红影 发表于 2023-8-18 14:56

有声有色 发表于 2023-8-18 11:24
谢谢支持,这是我在网上看到的，用PS试做，做的这条龙还不太像，忘了关于时间轴的问题，我也不知道错在哪 ...

那些显示不出全部的那些还以为是特地弄的效果呢{:4_173:}

红影 发表于 2023-8-18 14:56

有声有色 发表于 2023-8-18 11:28
谢谢 我改过来了

改过来打开会快很多{:4_173:}

梦油 发表于 2023-8-18 15:09

有声有色 发表于 2023-8-18 11:29
谢谢支持

有声有色朋友别客气。

冬天的雨 发表于 2023-8-18 18:27

这个图感觉中间的红的竖的（是不是箭？）和动图不相配

冬天的雨 发表于 2023-8-18 18:27

感谢分享{:4_187:}

马黑黑 发表于 2023-8-18 21:05

创意很棒。欣赏。

有声有色 发表于 2023-8-19 08:30

冬天的雨 发表于 2023-8-18 18:27
这个图感觉中间的红的竖的（是不是箭？）和动图不相配

这是在网上看到的，我是照葫芦画瓢

有声有色 发表于 2023-8-19 08:30

冬天的雨 发表于 2023-8-18 18:27
感谢分享

谢谢

有声有色 发表于 2023-8-19 08:31

马黑黑 发表于 2023-8-18 21:05
创意很棒。欣赏。

谢谢鼓励

马黑黑 发表于 2023-8-19 08:35

有声有色 发表于 2023-8-19 08:31
谢谢鼓励

{:4_190:}

冬天的雨 发表于 2023-8-20 12:20

有声有色 发表于 2023-8-19 08:30
谢谢

不客气
页: [1] 2
查看完整版本: 我的中国心