山里人 发表于 2024-6-30 21:09

你来与不来我都在等你【翻唱】

<style>
        #papa { margin: 20px 0 50px calc(50% - 661px); width: 1200px; height: 645px; background: lightblue; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
        .vid { position: absolute;width: 105%;height: 100%;right:-50px;object-fit: cover; pointer-events: none; z-index: 2;}
        .vid:nth-of-type(2) { height: 50%; height: calc(100% + 70px);top: -70px; mix-blend-mode: screen; opacity: .39; z-index: 3;}
        .star { position: absolute; left: 30px; bottom: 40px; cursor: pointer; animation: ani 1.5s linear infinite alternate var(--state); z-index: 6;mix-blend-mode: screen;opacity: .6;}
        .star:nth-of-type(2) { left: 180px; bottom: 160px; animation-delay: -.5s; mix-blend-mode: screen;opacity: .3;}
        .star:nth-of-type(3) { left: 600px; bottom: 10px; animation-delay: -1s; mix-blend-mode: screen;opacity: .1;}
        @keyframes ani { from { transform: rotate(-10deg) scale(.8); opacity: .2; } to { transform: rotate(10deg) scale(1.5);} }
</style>

<div id="papa">
        <audio id="aud" src="https://shanlr.s3-us-east-1.ossfiles.com/sp/dn.mp4" autoplay loop></audio>
        <video class="vid" src="https://shanlr.s3-us-east-1.ossfiles.com/sp/dn.mp4" loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/68/5eccc5f8c568c.mp" loop muted></video>
        <img class="star" alt="" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/star.webp" />
        <img class="star" alt="" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/star.webp" />
        <img class="star" alt="" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/star.webp" />
</div>

<script>
(function() {
        const vids = document.querySelectorAll('.vid'), stars = document.querySelectorAll('.star');
        aud.onplaying = aud.onpause = () => {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                vids.forEach( vid => aud.paused ? vid.pause() : vid.play());
                stars.forEach(star => star.title = aud.paused ? '点击播放' : '点击暂停');
        };
        stars.forEach(star => star.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

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

红影 发表于 2024-6-30 22:40

这个原来是视频上加入代码呢，还以为是纯粹代码制作的呢。
很漂亮，欣赏山里人好帖{:4_187:}

红影 发表于 2024-6-30 22:40

安静听雨，这个是山里人的其他网名吧{:4_204:}

绿叶清舟 发表于 2024-7-2 21:44

这声音浑厚，谁的马甲啊

梦江南 发表于 2024-7-5 09:46

欣赏老师音画佳作！
页: [1]
查看完整版本: 你来与不来我都在等你【翻唱】