小雨的心 发表于 2024-6-1 10:21:24

【小雨音画】蝴蝶飞 61儿童节快乐

<style>
    #mydiv { margin: 0 0 0 calc(50% - 901px);
    width: 1600px;
    height: 900px;
    box-shadow: 0 0 12px gray;
    background: url('http://www.yhyhlt.com/data/attachment/forum/202405/31/112513skkvwta93z31v4a6.jpg') no-repeat center/cover;
    overflow: hidden;
    z-index: 1;
    position: relative;
    display: grid;
    place-items: center;
    --state: running; }
#mydiv > img { transform: translate(30px); mix-blend-mode: screen;opacity: .50;}
#vid {
    position: absolute;
    width: 60%;
    height: 110%;
    top:-60px;
left:1px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .23;
}
</style>
<div id="mydiv"><video id="vid" src="" autoplay="" loop="" muted=""></video>
<img src="" alt="" /></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5269526.mp3" loop="loop" autoplay="autoplay"></audio>
<script>
    (function() {
    let js1 = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js',
      js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    let loadJs = (url,callback) => {
      let body = document.querySelector('body'), jsNode = document.createElement('script');
      jsNode.charset = 'utf-8';
      jsNode.setAttribute('src', url);
      body.appendChild(jsNode);
      jsNode.onload = () => callback();
    };

    loadJs(js1, () => {
      let geci = [,
   ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
      HCPlayer({
            papa: '#mydiv',
            lrcAr: geci,
fs_css: 'left: 50px; bottom:50px; background: transparent;',
            lrc_css: `
                top: 10px;
font-size: 20px;
                color: WhiteSmoke;
                --bg: linear-gradient(180deg, White, SlateGray);
    opacity: .26;
            `,
            player_css: `
                bottom: 10px;
                color: snow;
                z-index: 10;
            `,
            pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
      });
    });

    loadJs(js2, () => {
      H5lz({
            papa: '#mydiv',
            total: 160,
            size: {width: 3, height: 2},
            shape: {background: '', borderRadius: '50%'},
   
            maxTime: 24,
            offset: {x: 0, y: 0},
            ani: 'out2C',
            css: 'opacity: .95; box-shadow: inset 0 0 8px #fff;',
      });
    });
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br><br><br><br><br><br>

浅唱 发表于 2024-6-3 12:34:16

六月的声音
开心每一天

浅唱 发表于 2024-6-3 12:35:13

遥远的曾经的
故事里有美丽的从前

欧阳风刀 发表于 2024-6-4 19:22:34

光影漂亮，意境丰沛。小雨好作品！{:1_155:}

紫雨琦琦 发表于 2024-6-5 19:14:54

可爱的，美丽的，带点童话色彩:victory:

绿蔷薇 发表于 2024-6-11 22:16:15

明暗把控的真好，喜欢的画面构思~~

绿蔷薇 发表于 2024-6-11 22:17:19

蝴蝶飞 蝴蝶飞带我们回到那个充满回忆的年代
页: [1]
查看完整版本: 【小雨音画】蝴蝶飞 61儿童节快乐