论坛 › 『唯美音画』 › 【雨声音画】记忆

雨声 发表于 2023-12-6 20:28

【雨声音画】记忆

<style>
#papa {
        margin: 0 0 0 calc(50% - 931px);
        display: grid;
        place-items: center;
        width: 1600px;
        height: 800px;
top:130px;
        background: lightblue url('https://www.dlbbs.com/data/attachment/forum/202312/06/202904peco908vte2xkcyy.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
    overflow: hidden;
        --state: running;
}
.mypic {
      position: absolute;
    right:200px;   
    top:10px;   
      cursor: pointer;
    mix-blend-mode: Multiply;
    z-index: 3;
    }
.play_pic:nth-of-type(1) {
        width: 30px;
    right:-10px;
    bottom:10px;
        opacity: .8;
        transition: 0.5s;
transform: rotate(145deg);

}
.play_pic:nth-of-type(2) {
        width:100px;
        bottom: 50px;
        left:780px;
                opacity: .6;
        animation: rot 10s infinite var(--state);
}
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot {
        to { transform: rotate(1turn); }
}
#vid1 {
        position: absolute;
        width: 120%;
        height: 120%;
        top:100px;
        left:-201px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index:3;
        opacity: .26;
}
#vid2 {
        position: absolute;
        width: 100%;
        height: 110%;
        top:-80px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 5;
        opacity: .46;
}
</style>

<div id="papa">
               <div class="mypic"><img src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /></div>
               <video id="vid1" src="https://img3.tukuppt.com/video_show/2418175/00/02/22/5b52e01dad564.mp4" autoplay="" loop="" muted=""></video>
        <video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/14/65/5e5a104ab5a88.mp4" autoplay="" loop="" muted=""></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=319936" autoplay loop></audio>
        <img class="play_pic" src="" alt="" />
        <img class="play_pic" src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" alt="" />
</div>

<script>

let lrcAr = [       
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

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('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
        HCPlayer({
                papa: '#papa',
                lrcAr: lrcAr,
                lrc_css: 'bottom: 70px;color: Lavender;--bg: linear-gradient(180deg, White, SlateGray);font-size: 2em;',
        });
});


papa.onclick = () => aud.paused ? (vid1.pause(),vid2.pause()) : (vid1.play(),vid2.play());
</script>
<br><br><br><br><br><br><br><br>

雨声 发表于 2023-12-6 20:29

雨声 发表于 2023-12-6 20:30

祝朋友们冬日安好！{:10_402:}

愤怒の葡萄 发表于 2023-12-6 21:05

咱们论坛又来了一个音画大师啊。

墨羽 发表于 2023-12-6 21:07

人生若只如初见~！
{:10_403:}{:10_403:}{:10_403:}

小沫 发表于 2023-12-25 10:53

单图文字排版的真美
动态的大雁也很应景

宁静 发表于 2024-1-1 10:33

欣赏雨声姐的精美图图，背景视频动画运用增加了画面的灵动感，小花伞播放器漂亮，感谢分享！{:10_402:}

声声慢 发表于 2024-1-21 14:51

真好看，好听，雨声，很久不见你发新作了

云笛 发表于 2024-1-25 12:43

中午好雨声，很高兴在这遇见你——相逢是一首歌 {:10_402:}

姚云裳 发表于 2024-2-2 21:58

老友的图图好美，学习

查看完整版本: 【雨声音画】记忆