小辣椒 发表于 2024-7-10 21:34

花只是开给荒野


<style>
        #mydiv { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 850px; background: url('https://wj.zp68.com/lxx/yunhua/2024/07/07/5.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; overflow: hidden; display: grid; place-items: center; position: relative; }
        #mydiv::after {content: attr(data-lrc); position: absolute; bottom: 30px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px \9ED1\4F53; color: transparent;text-shadow: 1px 1px 1px #138b79;background: radial-gradient(pink, white, Salmon) center/120px 60px; -webkit-background-clip: text;}

        #mydiv::before { position: absolute; content: ''; inset: 0; background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 11px, transparent 12px), repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), linear-gradient(180deg, hsl(31,100%,50%), hsl(51,100%,50%), hsl(71,100%,50%), hsl(178,100%,50%), hsl(234,100%,82%)); mix-blend-mode: color-dodge; animation: chg 6s linear infinite var(--state); }
        #player { position: absolute; left: 80%; top: 80%; width: 120px; filter: hue-rotate(320deg); z-index: 10; transition: width .5s; opacity: .5; cursor: pointer; animation: rot 8s linear infinite var(--state); }

    #player:hover { filter: hue-rotate(240deg); }
    #vid { position: absolute; left: -200px; top: -100px; opacity: .3; width: 80%; height: 50%;transform: rotate(20deg); object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }#pic { position: absolute; width: 129px; height: 288px;bottom: -20px; left: 250px; transform-origin:left bottom;transform: rotate(-1deg); animation: hy 1.2sinfinite alternate linear var(--state);}


    @keyframes hy { from { opacity: 0.6; transform: rotate(-1deg); }to { opacity: .25; transform: rotate(2deg); }}
    @keyframes rot { to { transform: rotate(360deg); } }
    @keyframes chg { to { inset: -60px; } }
</style>

<div id="mydiv" class="mydiv" data-lrc="HUACHAO">

        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/07/07/001.mp3" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec494a494d82.mp4" autoplay loop muted></video>
<img id="player" alt="" src="https://wj.zp68.com/lxx/yunhua/2024/07/07/1.png" titel="播放/暂停" />
    <img id="pic" alt="" src="https://wj.zp68.com/lxx/yunhua/2024/07/07/35.png" />
</div>

<script>
var 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: '#mydiv',
        css: 'bottom: 100px; left: 50%; transform: translate(-50%); --color: rgba(32,178,170.5); --fsBg: transparent;',
});
var curkey = 0, lrcAr = [];
        var getAr = (text) => {
                var ar = text.trim().split('\n');
                ar.sort();
                var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        let result = item.match(reg);
                        let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                        lrcAr.push(.trim()]);
                });
        };
var mState = () => {
        mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onseeked = () => curkey = 0;
        aud.ontimeupdate = () => {
                if(curkey > lrcAr.length - 1) return;
                if(aud.currentTime >= lrcAr) {
                        mydiv.dataset.lrc = lrcAr;
                        curkey ++;
                }
        };       
        var lrc = ` 花只是开给荒野\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n这个城市还像\n从前一样热闹\n而能够开心的事\n却越来越少\n记忆有很多个\n褪了色的记号\n但你的好 我一直忘不掉\n落日不就是快要\n失去天空的怀抱\n你不在风景再美\n也像全部都失效\n回忆总那么糟\n美好又让人烦恼\n像一个个一触就破的气泡\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n眼前的一切像少了另一半的世界\n你带走的是填不了的空缺\n没有你的夜风\n花从不为我摇曳\n没有的你天空\n星辰再美也像熄灭\n所有浪漫在我眼前 慢慢凋谢\n又落满了想念你的夜\n~Music~\n这个城市还像\n从前一样热闹\n而能够开心的事\n却越来越少\n记忆有很多个\n褪了色的记号\n但你的好 我一直忘不掉\n落日不就是快要\n失去天空的怀抱\n你不在风景再美\n也像全部都失效\n回忆总那么糟\n美好又让人烦恼\n像一个个一触就破的气泡\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n眼前的一切像少了另一半的世界\n你带走的是填不了的空缺\n没有你的夜风\n花从不为我摇曳\n没有的你天空\n星辰再美也像熄灭\n所有浪漫在我眼前 慢慢凋谢\n又落满了想念你的夜\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n眼前的一切像少了另一半的世界\n你带走的是填不了的空缺\n没有你的夜风\n花从不为我摇曳\n没有的你天空\n星辰再美也像熄灭\n所有浪漫在我眼前 慢慢凋谢\n又落满了想念你的夜\n☆谢谢欣赏☆
`;
        getAr(lrc);
</script>

admin 发表于 2024-7-10 23:00

这个漂亮 好看 👍{:5_140:}

小辣椒 发表于 2024-7-10 23:15

admin 发表于 2024-7-10 23:00
这个漂亮 好看 👍
难得出现，今天有空了啊{:5_122:}

liumang 发表于 2024-7-11 01:04

今天这个美女漂亮的;P

liumang 发表于 2024-7-11 01:05

好像也是同一首

liumang 发表于 2024-7-11 01:05

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-7-11 01:06

感谢小辣椒分享{:5_124:}
页: [1]
查看完整版本: 花只是开给荒野