小辣椒 发表于 2024-3-27 20:53

Justin G - 恋爱的旋律

<style>
#papa {
    margin: 150px 0 0 calc(50% - 881px);
   width: 1600px;
    height: 849px;
    background: url('https://xlaj.cn/assets/file/zp/20240317200715.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    position: relative;
    z-index: 1000;
}
#btnplay {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 120px;
    height: 120px;
    transition: 5s;
    cursor: pointer;
    opacity: .9;
    animation: rot 6s linear infinite var(--state);
}
#papa:fullscreen #btnplay { width: 120px; height: 120px; }
#papa video {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 80%;
    object-fit: cover;
    mix-blend-mode: lighten;
    opacity: .45;
    pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
#dt1{ position: absolute; width:435px; height: 229px; top: 60%; left: 30%; }


</style>

<div id="papa">

<imgid="dt1"src="https://xlaj.cn/assets/file/zp/20240317200747.gif " alt="" style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />


    <audio src="https://s2.ananas.chaoxing.com/sv-w7/audio/77/32/a8/08e747ee058003d8a1e0822c0e0a6282/audio.mp3" autoplay loop></audio>
    <video src="https://img.tukuppt.com/video_show/2418175/01/26/80/625c2b1b24a3d.mp4" loop muted></video>
<video src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca8d8e37e3.mp4" loop muted></video>

    <img id="btnplay" src="https://xlaj.cn/assets/file/zp/20240317200837.png" alt="" title="点击播放" />
</div>

<script>
(function() {
    let sF = document.createElement('script');
    sF.src = 'https://638183.freep.cn/638183/web/api/fsgo_hc.js';
    sF.charset = 'utf-8';
    document.querySelector('body').appendChild(sF);
    sF.onload = () => FS({
      papa: '#papa',
      css: '--bg: transparent; --color: #fff; bottom: 10px; left: 48%;',
      go: {x: true, y: true}
    });
})();
</script>
<br><br><br>

小辣椒 发表于 2024-3-27 20:54

这里全屏打不开，等一下我去换纯代码发帖

小辣椒 发表于 2024-3-27 20:57

现在换了纯代码发帖，点击全屏欣赏更漂亮一点

liumang 发表于 2024-3-27 20:59

大气的画面，降落伞是播放器按钮{:5_150:}

無名 发表于 2024-3-27 20:59

这个也很漂亮啊！转去我论坛了，谢谢分享。

小辣椒 发表于 2024-3-27 21:01

無名 发表于 2024-3-27 20:59
这个也很漂亮啊！转去我论坛了，谢谢分享。

这个歌是纯代码制作，降落伞是播放器按钮

小辣椒 发表于 2024-3-27 21:02

liumang 发表于 2024-3-27 20:59
大气的画面，降落伞是播放器按钮

知道你一看就晓得;P

liumang 发表于 2024-3-27 21:07

@ admin

小辣椒 发表于 2024-3-27 21:09

liumang 发表于 2024-3-27 21:07
@ admin

降落伞按钮随鼠标移动

無名 发表于 2024-3-27 21:20

小辣椒 发表于 2024-3-27 21:01
这个歌是纯代码制作，降落伞是播放器按钮

嗯！我转走了，不过稍微改了下框架，不然太大了，反正也有全屏按钮。

https://boonkiong.com/thread-7861-1-1.html
页: [1] 2
查看完整版本: Justin G - 恋爱的旋律