小雨的心 发表于 2024-5-12 09:30:11

【小雨音画】星河万里 致：花简静

<style>#papa {
    margin: 0 0 0 calc(50% - 881px);
    width: 1600px;
    height:900px;
    top:130px;
    background: url('https://806447640.oss-cn-beijing.aliyuncs.com/21/61/hhhh.jpg') no-repeat center/cover;
    box-shadow: 4px 4px 8px black;
    overflow: hidden;
    display: grid;
    place-items: center;
    z-index: 1;
    position: relative;
    --state: running;
}
#sky { position: absolute; width: 50%; height: 50%; top: 20;right:10px; }
#vid {
    position: absolute;
    width: 110%;
    height: 100%;
      right:-350px;
top:-50px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
    opacity: .56;
}
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/38/5b41f56b0c7fb.mp4" autoplay="" loop="" muted=""></video>
<div id="sky"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1843704418.mp3" autoplay="" loop=""></audio></div>
<script>
(function() {
    let lrcAr = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
];
    let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_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, () => {
      HCPlayer({
            papa: '#papa',
            lrcAr: lrcAr,
            lrc_css: 'top: 20px;',
            fs_css: 'bottom: 5%; left:5%;background: transparent;',
            player_css: 'width: 240px; height: 380px; bottom: 34%;right:26%;',
            path: 'M160 10 C10 10, 90 200, 160 300',
            btn: {left: 104, top: 40},
            track: {track: '#BDB76B', prog: '#006400'},
            img: {play: 'https://pic.imgdb.cn/item/651e4459c458853aef198abe.png', pause: 'https://pic.imgdb.cn/item/651e445ec458853aef198b6e.png'}
      });
    });

    loadJs(js2, () => {
      H5lz({
            papa: '#sky',
            total: 70,
            size: {width: 10, height: 10},
            shape: {background: '', borderRadius: ''},
            ani: 'toLeft',
            maxTime: 30,
            offset: {x: 0, y:0},
      });
    });
})();
document.querySelector('.papa').onclick = () => aud.paused ? vid.pause() : vid.play();</script>
<br><br><br><br><br><br><br><br><br><br>

欧阳风刀 发表于 2024-5-13 18:40:22

明媚的阳光，清新的海风。画面很是优美！

欧阳风刀 发表于 2024-5-13 18:41:07

欣赏！问候小雨！{:1_155:}

浅唱 发表于 2024-5-16 11:49:06

歌曲配的非常好
意境满满

绿蔷薇 发表于 2024-5-20 18:33:44

好明媚的画面，完全就是夏天的色彩，看着就是舒服~~{:4_123:}

绿蔷薇 发表于 2024-5-20 18:34:10

画面美，曲曲美，喜欢，小雨好制作~~{:5_130:}

小雨的心 发表于 2024-6-1 11:12:40

欧阳风刀 发表于 2024-5-13 18:41
欣赏！问候小雨！

问好风帅，谢谢欣赏

小雨的心 发表于 2024-6-1 11:13:17

浅唱 发表于 2024-5-16 11:49
歌曲配的非常好
意境满满

问好浅唱，感谢临帖支持

小雨的心 发表于 2024-6-1 11:13:37

绿蔷薇 发表于 2024-5-20 18:34
画面美，曲曲美，喜欢，小雨好制作~~

谢谢薇薇的夸奖，问好
页: [1]
查看完整版本: 【小雨音画】星河万里 致：花简静