小辣椒 发表于 2024-3-10 13:15

Billy - 渡情_SQ


<style>
#papa { margin: 150px 0 0 calc(50% - 881px); width: 1600px; height: 808px; background:url('https://wj.zp68.com/lxx/yunhua/2024/03/09/bj.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; transition: filter 1s; position: relative; z-index: 1; }

#papa:hover { filter: brightness(1.2); }
#player { position: absolute; left: 620px; top: 540px; width: 100px; border-radius: 50%; transition: 4s; cursor: pointer; animation: rot .5s infinite alternate var(--state); }
#vid { position: absolute; width: 20%; height: 20%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%); }
@keyframes rot { to { transform: scale(.8); } }
#dt2{ position: absolute; width:93px; height: 146px; top: 43%;left:24%; }
#dt3{ position: absolute; width:93px; height: 146px; top: 43%; right: 21%;}
</style>

<div id="papa">
        <img id="player" src="https://wj.zp68.com/lxx/yunhua/2024/03/09/da.gif" alt="" />
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2024/03/09/xiao.gif" alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt3" src="https://wj.zp68.com/lxx/yunhua/2024/03/09/xiao.gif" alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />


        <video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/34/5b4168b3cb2a5.mp4" loop muted></video>
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/287c-audiofreehighqps/D5/B8/GKwRINsIZfw5ADFKAwIr9Uvq.m4a" autoplay loop></audio>
</div>

<script>
(function() {
        let 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: '#papa'});
        let getOffsetPos = (ele) => {
                let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
                while(pa != null) {
                        x += pa.offsetLeft;
                        y += pa.offsetTop;
                        pa = pa.offsetParent;
                }
                return {x, y};
        };
        let mState = () => aud.paused
                ? (papa.style.setProperty('--state','paused'), vid.pause())
                : (papa.style.setProperty('--state','running'), vid.play());
        aud.onpause = () => mState();
        aud.onplaying = () => mState();
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
        let movTimer = null,
                paWidth = papa.clientWidth,
                paHeight = papa.clientHeight,
                sonSize = player.clientWidth,
                bodyWidth = document.body.clientWidth,
                bodyHeight = document.body.clientHeight,
                paOffset = {x: getOffsetPos(papa).x, y: getOffsetPos(papa).y};
        document.onmousemove = function(e) {
                clearTimeout(movTimer);
                movTimer = setTimeout(function() {
                        if(e.target.id === "player") return;
                        if(document.fullscreenElement === null) {
                                let x = e.pageX, y = e.pageY;
                                if(x < paOffset.x) x = paOffset.x;
                                if(y < paOffset.y) y = paOffset.y;
                                x = x - paOffset.x;
                                y = y - paOffset.y;
                                if(x + sonSize >= paWidth) x = paWidth - sonSize;
                                if(y + sonSize >= paHeight) y = paHeight - sonSize;
                                player.style.cssText += `left: ${x}px; top: ${y}px`;
                        } else {
                                let xx = e.offsetX, yy = e.offsetY;
                                if(xx + sonSize > bodyWidth) xx -= sonSize;
                                if(yy + sonSize > bodyHeight) yy -= sonSize;
                                player.style.cssText += `left: ${xx}px; top: ${yy}px`;
                        }
                }, 400);
        };
})();
</script>

小辣椒 发表于 2024-3-10 13:15

播放器随鼠标变换位置

亦是金 发表于 2024-3-10 13:29

很漂亮！特效棒棒哒！{:5_147:}

liumang 发表于 2024-3-10 20:58

豪华型客厅{:5_150:}

liumang 发表于 2024-3-10 20:58

纯音好听，大电视机里面的播放也是好看

小辣椒 发表于 2024-3-12 16:19

亦是金 发表于 2024-3-10 13:29
很漂亮！特效棒棒哒！

问好前辈，谢谢欣赏{:5_156:}

小辣椒 发表于 2024-3-12 16:21

liumang 发表于 2024-3-10 20:58
豪华型客厅

现在这种图图也是难找了，都带广告了

小辣椒 发表于 2024-3-12 16:22

liumang 发表于 2024-3-10 20:58
纯音好听，大电视机里面的播放也是好看

谢谢 liumang欣赏{:5_154:}

liumang 发表于 2024-3-12 20:00

小辣椒 发表于 2024-3-12 16:22
谢谢 liumang欣赏

不客气，这首纯音上次做古风里面的，特别好听

liumang 发表于 2024-3-12 20:01

小辣椒 发表于 2024-3-12 16:21
现在这种图图也是难找了，都带广告了

现在网络找高清的都要会员了
页: [1] 2
查看完整版本: Billy - 渡情_SQ