有声有色 发表于 2023-8-23 13:58

评弹 （花厅评理））

本帖最后由 有声有色 于 2024-6-24 09:02 编辑 <br /><br /><style>
#papa {margin: 110px -300px; width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/6671110ed9c307b7e9bfa420.jpg') 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://link.hhtjim.com/163/331598.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 = [

        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
    window.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-23 16:54

这个自己制作的动图用在帖子中了。加上倒影觉得更漂亮了。欣赏有声有色老师好帖{:4_187:}

红影 发表于 2023-8-23 16:55

有原创内容的加持，让帖子更完美了{:4_199:}

醉美水芙蓉 发表于 2023-8-23 17:23

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

红影 发表于 2023-8-23 16:54
这个自己制作的动图用在帖子中了。加上倒影觉得更漂亮了。欣赏有声有色老师好帖

谢谢支持

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

醉美水芙蓉 发表于 2023-8-23 17:23
帖子完美漂亮！

谢谢支持

红影 发表于 2023-8-24 10:53

有声有色 发表于 2023-8-24 08:30
谢谢支持

问好有声有色老师，上午好{:4_187:}
页: [1]
查看完整版本: 评弹 （花厅评理））