福宝 发表于 2024-6-23 20:22

盗火

本帖最后由 福宝 于 2024-6-23 21:56 编辑 <br /><br /><style>
#mydiv {
        margin: 150px 0 30px calc(50% - 681px);
        width: 1200px;
        height: 2000px;
        background: url('https://gd-hbimg.huaban.com/135da3c896b181ecf7674a7da1a6e4af9c1e387c21182-WpnMKX_fw1200') no-repeat top   center/cover;
        box-shadow: 3px 3px 8px #000, 0 0 0 2px silver;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        left: 800px;
        top: 1350px;
        --size: 360px;
        width: var(--size);
        height: var(--size);
        transition: 3s;
    transform: rotate(0deg);
        cursor: pointer;mix-blend-mode: screen;
}
#player:hover { --size: 160px; filter: hue-rotate(180deg);}

#vid {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: calc(100% + 100px);
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;opacity : 0.69;
}

#pic{position: absolute;
        bottom: -35px;
        left:80px;
        width: 35%;height:35%;       
        clip-path: ellipse(200px 200px at center);
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;opacity : 0.99;
}

   
   
</style>

<div id="mydiv">
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/89/5e6708ca0b435.mp4" loop muted></video>
        <img id="pic" src="https://gd-hbimg.huaban.com/2ed9e199c73e4243e6247fbb947bdbd7d3f7dde6b7f47-CdsIYu_fw1200"/ >
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28935277" autoplay loop></audio>
        <img id="player" src="https://gd-hbimg.huaban.com/940b5ce035a522df0859ed4b7d02b9a64c7409e64c7b7c-vezW9i" alt="" />
</div>

<script>
(function() {
        let timer = null, sF = document.createElement('script');       
        sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
        sF.charset = 'utf-8';       
        document.querySelector('body').appendChild(sF);
        sF.onload = () => FS({papa: '#mydiv'});       
        mydiv.onmousemove = function(e) {
                clearTimeout(timer);
                timer = setTimeout(function() {
                        if(e.target.id === 'player') return;
                        let x = e.offsetX | e.layerX, y = e.offsetY | e.layerY, sw = player.offsetWidth;
                        if(x < 0) x = 0;
                        if(x > mydiv.offsetWidth - sw) x = mydiv.offsetWidth - sw;
                        if(y < 0) y = 0;
                        if(y > mydiv.offsetHeight - sw) y = mydiv.offsetHeight - sw;
                        player.style.cssText += `left: ${x}px; top: ${y}px;`;
                }, 400);
        }
   
        let mState = () => aud.paused
                ? (mydiv.style.setProperty('--state','paused'), vid.pause())
                : (mydiv.style.setProperty('--state','running'), vid.play());
        aud.addEventListener('playing', mState);
        aud.addEventListener('pause', mState);
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

福宝 发表于 2024-6-23 20:23

（凡哥代码），学习编译

福宝 发表于 2024-6-23 20:24

请在极速模式下欣赏。不支持兼容模式

悦儿 发表于 2024-6-23 20:28

{:10_403:}燕子是播放器开关

蜻蜓 发表于 2024-6-24 07:33

漂亮！

福宝 发表于 2024-6-24 11:40

{:10_403:}谢谢临帖欣赏

瞳萤 发表于 2024-6-24 18:59

画面色彩鲜明，美轮美奂的啊
页: [1]
查看完整版本: 盗火