醉美水芙蓉 发表于 2025-1-6 21:41:13

如果来生做不了你的红颜知已

<style>
        .pa {
        --state: running;
        position: relative;
        display: grid;
        place-items: center;
        width: 1700px;
        height: 900px;
        box-shadow: 3px 3px 6px gray;
        z-index: 1;
}

.mplayer {
        position: absolute;
        animation: rot 8s linear infinite var(--state);
        cursor: pointer;
        transition: .7s;
}

.mplayer:hover {
        filter: brightness(2);
}

.fsbtn {
        position: absolute;
        color: lightblue;
        padding: 2px 6px;
        border: 2px solid lightblue;
        border-radius: 8px;
        user-select: none;
        cursor: pointer;
        transition: .5s;
        z-index: 9;
}

.vid {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        webkit-mask: radial-gradient(transparent 20%, red);
        -webkit-mask: radial-gradient(transparent 20%, red);
        pointer-events: none;
}

@keyframes rot {
        to { transform: rotate(360deg); }
}
        #tz { --state: running; margin: 30px 0 30px calc(50% - 940px); background: url('https://bbs.cnzv.cc/up/upload/pic/12/20250106-e804ae92e58591d30da6031e537cdfdd.jpg') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
        <audio src="https://i.mp3.wf/215060891.m4a"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/19/video6364e277489e5.mp4" autoplay loop muted></video>
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="top: 100px;" />
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="left: 100px;" />
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="right: 100px;" />
        <div id="fsbtn" class="fsbtn" style="bottom: 20px;"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/button.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        hcplay(tz);
        fscreen.fs(tz, fsbtn);
</script>

klxf 发表于 2025-1-8 13:00:50

效果挺好，谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2025-1-8 20:32:33

klxf 发表于 2025-1-8 13:00
效果挺好，谢谢醉美管理员精彩分享

谢谢友友光临！

活跃概况 发表于 前天 00:49

好像还不错！
页: [1]
查看完整版本: 如果来生做不了你的红颜知已