小辣椒 发表于 2024-8-5 21:32

我喜欢独自一人坐在车里 （学习套用黑黑T台人生效果）


<style>
#mydiv {
        margin: 150px 0 30px calc(50% - 929px);
        width: 1696px;
        height: 868px;
        background: url('https://xlaj.cn/assets/file/zp/20240805182104.jpg') no-repeat center/cover;
        box-shadow: 0 0 6px rgba(0,0,0,.6);
        user-select: none;
        z-index: 1;
        position: relative;
        --pos: 0.1%;
}
#mydiv::after {
        position: absolute;
        content: '';
        inset: 0;
        background: url('https://xlaj.cn/assets/file/zp/20240205153507.gif') no-repeat center/cover;
        -webkit-mask: linear-gradient(to top right, red var(--pos), transparent calc(var(--pos) + 5%), transparent);
}
#player {
        position: absolute;
        left: calc(10% - 30px);
               width: 120px;
        height: 120px;
        top:120px;
        cursor: pointer;
        transition: 1.2s;
        z-index: 2;
        animation: rot 6s linear infinite var(--state);
}
#player:hover { filter: drop-shadow(0 0 50px DarkGreen); }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask: linear-gradient(to top right, red 90%, transparent 91%, transparent 0);
        mix-blend-mode: screen;
}
@keyframes rot {
        to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/ae2b-audiofreehighqps/B5/02/GKwRIasJk6jVACAAAAKkLCJO.m4a" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/33/17/5fc324c5b5d25.mp4" autoplay loop muted></video>
        <img id="player" alt="" title="播放/暂停" src="https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/ann.png" />
</div>

<script>
var zStep = 0.2, zVal = 0, zDo = false;
zMask = () => {
        zVal += zStep;
        if(zVal > 100 || zVal < -5) zStep = -zStep;
        setTimeout( () => {
                mydiv.style.setProperty('--pos', zVal + '%');
                if(zDo) zMask();
        }, 20);
};
mState = () => {
        mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = '点击' + ['暂停','播放'][+aud.paused];
        aud.paused ? vid.pause() : vid.play();
        zDo = aud.paused;
};
mydiv.onmouseover = (e) => {
        if(e.target.id.toLowerCase() !== 'mydiv' || aud.paused) return;
        zDo = true;
        zMask();
};
mydiv.onmouseout = () => zDo = false;
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br>

小辣椒 发表于 2024-8-5 21:35

@马黑黑 黑黑套用玩个，这个渐变效果，刚才上来一看就想好了，套用一个

谢谢黑黑源码分享

小辣椒 发表于 2024-8-5 21:35

鼠标要停在界面效果才会出来

小辣椒 发表于 2024-8-5 22:01

10点了，回帖还没有回完，来不及了，我得下了，大家晚安了

马黑黑 发表于 2024-8-5 22:04

{:4_199:}{:4_174:}

红影 发表于 2024-8-5 22:04

亲爱的这么快就把黑黑的最新代码效果做好了，太赞了{:4_199:}

梦江南 发表于 2024-8-6 08:28

哇，太棒了！{:4_187:}

梦江南 发表于 2024-8-6 08:29

小辣椒 发表于 2024-8-5 22:01
10点了，回帖还没有回完，来不及了，我得下了，大家晚安了

哦，辛苦了！{:4_204:}

梦油 发表于 2024-8-6 09:04

地铁车厢里是“避暑胜地”，但“一个人”的时候太少了。{:5_117:}

小辣椒 发表于 2024-8-8 21:48

马黑黑 发表于 2024-8-5 22:04


喝茶{:4_180:}

小辣椒 发表于 2024-8-8 21:48

红影 发表于 2024-8-5 22:04
亲爱的这么快就把黑黑的最新代码效果做好了，太赞了

亲爱的就套用代码，旧图，看看效果的，这样速度快的

小辣椒 发表于 2024-8-8 21:49

梦江南 发表于 2024-8-6 08:28
哇，太棒了！

问好梦江南。谢谢欣赏{:4_171:}

小辣椒 发表于 2024-8-8 21:49

梦江南 发表于 2024-8-6 08:29
哦，辛苦了！

现在忙，上来玩的时间少了

小辣椒 发表于 2024-8-8 21:50

梦油 发表于 2024-8-6 09:04
地铁车厢里是“避暑胜地”，但“一个人”的时候太少了。

梦油晚上好，哈哈~~~一个人的快乐！

红影 发表于 2024-8-8 23:21

小辣椒 发表于 2024-8-8 21:48
亲爱的就套用代码，旧图，看看效果的，这样速度快的

嗯嗯，至少知道怎么去用了{:4_187:}

梦油 发表于 2024-8-9 10:52

小辣椒 发表于 2024-8-8 21:50
梦油晚上好，哈哈~~~一个人的快乐！

我就喜欢一个人独坐。

小辣椒 发表于 2024-8-9 20:23

梦油 发表于 2024-8-9 10:52
我就喜欢一个人独坐。

哈哈~~梦油，我也是这样的，特别休息天，就一个人静静的坐着欣赏音乐。

梦油 发表于 2024-8-10 10:54

小辣椒 发表于 2024-8-9 20:23
哈哈~~梦油，我也是这样的，特别休息天，就一个人静静的坐着欣赏音乐。

看来，我们的性格还有相似之处啊。

小辣椒 发表于 2024-8-11 21:59

红影 发表于 2024-8-8 23:21
嗯嗯，至少知道怎么去用了

我这个是直接套用黑黑代码的

红影 发表于 2024-8-11 22:46

小辣椒 发表于 2024-8-11 21:59
我这个是直接套用黑黑代码的

我那个也没怎么改{:4_173:}
页: [1] 2
查看完整版本: 我喜欢独自一人坐在车里 （学习套用黑黑T台人生效果）