小辣椒 发表于 2024-7-26 22:47

今夜无眠


<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 779px);
        width: 1383px;
        height: 744px;
        background: url('https://wj.zp68.com/lxx/yunhua/2022/08/06/9IF.gif') no-repeat center/cover;
        box-shadow: 0 0 10px rgba(0,0,0,.6);
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
        position: relative;
}
#vid {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: calc(100% + 65px);
        object-fit: cover;
        -webkit-mask: linear-gradient(180deg, red 70%, transparent 85%, transparent);
}
#player {
        position: absolute;
        left: 80px;
        bottom: 80px;
        width: 100px;
        cursor: pointer;
        pointer-events: auto;
        filter: invert(.55);
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to { transform: rotate(-360deg); } }

.pic1 {
   position: absolute;
   transform: rotate(0deg);
   right:160px;   
   top:10px;
    mix-blend-mode: screen;
    z-index: 3;
    -webkit-mask: linear-gradient(-90deg,transparent,red 90%,transparent 95%, transparent);
    }

.pic2 {
   position: absolute;
   transform: rotate(0deg);
   left: 60px;
   top:50px;
    mix-blend-mode: screen;
    z-index: 4;

    }

.pic3 {
   position: absolute;
   transform: rotate(0deg);
   width: 499px;
   height: 365px;
   left: 80px;
   top:-30px;
    mix-blend-mode: screen;
    z-index: 5;

    }

</style>

<div id="mydiv">
        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yy/jywm.mp3" autoplay loop></audio>

<div class="pic1"><img src="https://wj.zp68.com/lxx/yunhua/2024/07/26/01.gif" alt="" /></div>
<div class="pic2"><img src="https://wj.zp68.com/lxx/yunhua/2024/07/26/02.gif" alt="" /></div>
<div class="pic3"><img src="https://wj.zp68.com/lxx/yunhua/2024/07/26/03.jpg" alt="" /></div>

        <video id="vid" src="https://txcdn-data.mvbox.cn/live/vp/38/66e2e727fea16961dd08020f53bbf087.mp4" autoplay loop muted></video>
        <img id="player" alt="" title="播放/暂停" src="https://xlaj.cn/assets/file/zp/20240106162128.svg" />
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
        player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>


liumang 发表于 2024-7-27 20:14

背景底图太美的，上面加的是mp4频谱效果{:5_150:}{:5_150:}

liumang 发表于 2024-7-27 20:15

感谢分享{:5_124:}
页: [1]
查看完整版本: 今夜无眠