小雨的心 发表于 2025-3-24 09:59:31

【小雨音画】女人花

<style>
#papa {
    margin: 10px 0 10px calc(50% - 871px);
    width: 1600px;
    height:900px;
    background: url('https://xiaoyudexin.oss-cn-beijing.aliyuncs.com/20/2022/yang.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#vid {
    position: absolute;
    width: 100%;
    height: 130%;
    opacity: .99;
    top:-140px;
    object-fit: cover;
    mix-blend-mode: multiply;
    pointer-events: none;
}
#mypic {
    position: absolute;
    width: 60px;
    cursor: pointer;
    right:1159px;
    bottom:140px;
    animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa"><video id="vid" src="" autoplay loop muted></video>
    <img id="mypic" src="https://pic.imgdb.cn/item/658a82e6c458853aefff37dd.png" alt="" />
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440145355.mp3" autoplay loop></audio>
</div>

<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
    LRC({
      papa: '#papa',
      lrcAr: geci,
      btn: '#mypic',
      lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
    });
};
let geci = [
   ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
</script>

admin 发表于 2025-3-24 10:51:12

漂亮,这个图做的太赞了!:lol

醉美水芙蓉 发表于 2025-3-24 20:08:53

欣赏小雨精彩图图!

快乐布衣 发表于 2025-4-1 08:45:55

感谢分享,解决我的难题

fushunshifu 发表于 2025-4-7 16:46:24

支持分享,文章相当出色

shipinchangwu 发表于 2025-4-15 14:39:28

分享超棒呀,点赞支持啦
页: [1]
查看完整版本: 【小雨音画】女人花