论坛首页 › 单图音画 › 让世界因为我们而更加美丽

醉美水芙蓉 发表于 5 天前

让世界因为我们而更加美丽

<style>
        .pa {
        --state: running;
        position: relative;
        display: grid;
        place-items: center;
        width: 1300px;
        height: 731px;
        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;
        left:100px;
        padding: 2px 6px;
        border: 2px solid lightblue;
        border-radius: 8px;
        user-select: none;
        cursor: pointer;
        transition: .5s;
        z-index: 9;
}

.lrc {
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, hsla(100, 10%, 50%, .75), hsla(100, 100%, 20%, .65));
        position: absolute;
        font: bold 2.4em sans-serif;
        color: hsl(100, 100%, 90%);
        white-space: pre;
        -webkit-background-clip: text;
        filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
        user-select: none;
        z-index: 1000;
}

.lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        filter: inherit;
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards var(--state);
        animation-play-state: var(--state);
}

.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); }
}

@keyframes cover1 {
        from { width: 0; }
        to { width: 100%; }
}

@keyframes cover2 {
        from { width: 0; }
        to { width: 100%; }
}
        #tz { --state: running; margin: 30px 0 30px calc(50% - 734px); background: url('https://bbs.cnzv.cc/up/upload/pic/12/20250113-9fec4562c89e598f07fa5e4e07699a82.jpg') no-repeat center/cover; }
        #fsbtn { top: 20px; }
        #lrc { bottom: 20px; }
        #mplayer { Right:100px; top: 20px;width: 240px; height: 240px; display: grid; place-items: center; }
        .feather { position: absolute; width: 40px; height: 120px; background: url('https://bbs.cnzv.cc/up/upload/pic/12/20250113-8a19633ad580d1549c4bf168e6a3f765.png') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
        <audio src="https://cccimg.com/view.php/a9993a5885dc2f440aa98e452372a16e.mp3"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="mplayer" class="mplayer"></div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        var total = 9, a = 360 / total;
        for(var i = 0; i < total; i++) {
                var f = document.createElement('span');
                f.className = 'feather';
                f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
                mplayer.appendChild(f);
        }
        hcplay(tz, lrcAr);
        fscreen.fs(tz, fsbtn);
</script>

admin 发表于 5 天前

女的好像刘亦菲！

醉美水芙蓉 发表于 5 天前

admin 发表于 2025-1-13 21:21
女的好像刘亦菲！

就是刘亦菲呀！

醉美水芙蓉 发表于 5 天前

admin 发表于 2025-1-13 21:21
女的好像刘亦菲！

玫瑰的故事里面的图图！

klxf 发表于 5 天前

主题很好，让世界因为我们而更加美丽:)

醉美水芙蓉 发表于 4 天前

klxf 发表于 2025-1-13 23:15
主题很好，让世界因为我们而更加美丽

谢谢友友精彩点评！

落寞 发表于 昨天 10:49

期待中......

查看完整版本: 让世界因为我们而更加美丽