醉美水芙蓉 发表于 2026-5-12 23:40:04

大火烧山

<meta charset="utf-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
    #papa { margin: 0 0 0 calc(50% - 780px); width: 1300px; height:720px; background: #000000; overflow: hidden; display: grid; place-items: center; box-shadow: 0px 0px 0px gray; position: relative; z-index: 1; --state: paused; }

#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/e2b07d12c61ad5785d903425891d99bb.jpg)no-repeat center/cover;
top:0px; left:0px;
animation: rod 10s linear infinite var(--state);}
@keyframes rod{0% {opacity: 0.3;filter:hue-rotate(360deg);}
50% {opacity:1 ;}
100% {opacity: 0.3;}
}

li-zi { position: absolute; width: 100px; height: 0.5px; border-radius:100%50%;background: #fff000;animation: imov 2s infinite;z-index: 2;}
@keyframes moving {
to{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(360deg);}
from{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
.mplayer { position: absolute; width: 300px; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #eee; margin: auto; top: 90%; left:64%;z-index: 20; }
    .mplayer::before { position: absolute; content: attr(data-time); width: 100%; text-align-last: justify; pointer-events: none; }
    .btnPlay { width: 20px; height: 20px; cursor: pointer; position: relative; }
    .btnPlay::after { position: absolute; content: ''; width: 100%; height: 100%; background: #eee; clip-path: var(--clip); }
    .progress { --prg: 0%; position: relative; width: 100%; height: 20px; display: grid; place-items: center start; background: linear-gradient(90deg, red var(--prg), gray var(--prg), gray 0) no-repeat center/100% 2px; padding: 0; margin: 0; }
    .thumb { position: absolute; left: calc(var(--prg) - 10px); width: 10px; height: 10px; background: red; border: 1px solid #FF0000; border-radius: 50%; cursor: pointer; box-sizing: border-box; }
    .play { --clip: polygon(10% 0,100% 50%,10% 100%); }
    .pause { --clip: polygon(35% 0,15% 0,15% 100%, 35% 100%,35% 0,75% 0,75% 100%,55% 100%,55% 0); }

.lrc {position:absolute;width: 600px; height: 400px;
   z-index: 3; left:690px;
   border: 0px solid white;
    overflow: hidden;margin: 6px;
}

.lrc #ul {width: 100%;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0}
.lrc #ul li {
   cursor: pointer;
font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
    font-size: 25px;
    color: #fff;
    font-weight: 100;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 35px;
}
.lrc #ulli.active{   font-size: 35px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, #ff0000, orange) 50%/200px 60px; -webkit-background-clip: text;}

</style>
<div id="papa">
<div id="dh" ></div>
    <div class="mplayer" data-time="00:00 00:00">
        <div class="btnPlay play"></div>
        <div class="progress">
                <div class="thumb"></div>
        </div>
</div>
<div class="lrc">
      <ul id="ul">
      </ul>
    </div>

    <audio id="audio"autoplay loop>
            <source src="https://www.joy127.com/url/150449.mp3" type="audio/mpeg">
         </audio>

</div>
<script>
//获取需要操作的元素标识
const mplayer = document.querySelector('.mplayer');
const btnPlay = document.querySelector('.btnPlay');
const progress = document.querySelector('.progress');
const thumb = document.querySelector('.thumb');
const audio = document.querySelector('audio');
// 拖曳操作状态（初始值为假）
let isDraggable = false;

//时间格式化工具函数 ：秒转分秒 mm:ss 格式
const formatTime = (seconds) => {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

// 联动函数 mState ：处理按钮形状
const mState = () => {
        btnPlay.className = `btnPlay ${['pause', 'play'][+audio.paused]}`;
};

// 获取设备指针所在点在进度条上的距离（百分比）
const getPercent = (e) => {
        const rect = progress.getBoundingClientRect();
        const left = rect.left;
        const width = rect.width;
        let x = e.clientX ?? e.touches?.?.clientX ?? e.changedTouches?.?.clientX;
        x = Math.min(width, Math.max(0, x - left));
        return x / width * 100;
};

// 滑块鼠标按下、触屏设备手指或触笔按下
thumb.onmousedown = thumb.ontouchstart = (e) => {
        isDraggable = true; // 拖曳状态进行中
        e.preventDefault(); // 阻止默认行为
};

// 文档指针松开、触屏设备手指或触笔弹开
document.onmouseup = document.ontouchend = (e) => {
    // 松开时若拖曳状态为真，驱动 audio 改变播放进度
        if (isDraggable) audio.currentTime = `${getPercent(e) * audio.duration / 100}`;
        isDraggable = false; //然后拖曳状态为假
};

// 文档上指针或手指、触笔移动时
document.onmousemove = document.ontouchmove = (e) => {
        if (!isDraggable) return; // 若不是拖曳状态则忽略之
        // 反之，若处于拖曳状态，给CSS变量 --prg 赋值
        progress.style.setProperty('--prg', `${getPercent(e)}%`);
        // 给时间文本信息即mplayer伪元素 attr(data-time) 函数赋值
        mplayer.dataset.time = `${formatTime(audio.duration * getPercent(e) / 100)} ${formatTime(audio.duration)}`;
};

// 进度条点击事件
progress.onclick = (e) => audio.currentTime = `${getPercent(e) * audio.duration / 100}`;

// 音频标签开始播放和暂停时执行联动函数
audio.onplaying = audio.onpause = () => mState();

// 音频时间更新事件 ：驱动文本时间信息及进度条进度变更
audio.ontimeupdate = () => {
        if (isDraggable) return; // 拖曳操作发生时忽略
        mplayer.dataset.time = `${formatTime(audio.currentTime)} ${formatTime(audio.duration)}`;
        progress.style.setProperty('--prg', `${audio.currentTime / audio.duration * 100}%`);
};

// 按钮单击 ：播放、暂停状态切换
btnPlay.onclick = () => audio.paused ? audio.play() : audio.pause();
</script>
<script>
(function() {
var lrc = `大火烧山
太阳落坡 惹落月亮 的脸
大火烧山 哪怕烧作了 灰烟
LRC编辑：醉美水芙蓉
太阳 爬过了 寨子的 吊脚楼
月亮 坠进了 阿妹的 梳妆篓
风吹 那竹林 点着了 漫山愁
偏偏 烧不尽 我对你的 渴求
喝光了 祭天的 一百坛 包谷酒
灌不醉 心尖上 你下的 绝情咒
他们说 山神爷 掌控着 春与秋
我偏要 踏碎山 抢走你的 双手
我不求 银河宽 也不畏 冰雪寒
我不管 族规和 世俗有 多刁难
就算这 凡骨肉 必须去 过鬼门关
我也要 拉着你 来一场 惊天 的背叛
我开一嗓 喊破这 连绵的 九十道 弯
这满山的 烈火 全都是 我给的 狂欢
让这天地都来看 我对你 多蛮缠
不把你 爱成个 灰烬 我绝不 会转弯
我吼一声震碎那 头顶的 琉璃天
把今生的 孤勇 全当做 送你的 聘钱
就算刀山 也敢攀 只要你 一眨眼
燃烧成 灰 化作了 烟 也要跟你 长眠
这深渊 拦不住 迎风飞的 飞蛾
那大雨 灭不掉 骨头里的 狂热
不用猜 前方有 什么样 的妖魔
我今生 就认定 你这个 选择
我不求 银河宽 也不畏 冰雪寒
我不管 族规和 世俗有 多刁难
就算这 凡骨肉 必须去 过鬼门关
我也要 拉着你 来一场 惊天的背叛
我开一嗓 喊破这 连绵的 九十道 弯
这满山的 烈火 全都是 我给的 狂欢
让这天地 都来看我对你 多蛮缠
不把你 爱成个 灰烬 我绝不 会转弯
我吼一声 震碎那 头顶的 琉璃 天
把今生的 孤勇 全当做 送你的 聘钱
哪怕深渊也不管 只凭你 一挂牵
灰飞烟灭 永生永世 缠在你 的身边
生生世世缠在你的 身边哟
大火烧山 哪怕烧作了灰烟哦
谢谢欣赏！`;

let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio");
      var ul = document.querySelector("#ul");
      var container = document.querySelector(".lrc");

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }




   function createElements() {
            let fragment = document.createDocumentFragment();

            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;

                li.addEventListener("click", function () {
                  audio.currentTime = result.time;
                  setOffset();
                });

                fragment.appendChild(li);
            }

            ul.appendChild(fragment);
      }
      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            let offset = liHeight * index - containerHeight / 3 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);
})();
</script>

<script>



(function() {



let all = 160;

for(let i = 0; i < all; i++) {

    let movBall = document.createElement('li-zi');

    let hudu = Math.PI / 180 * 360 / all * i;

    let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);

    movBall.style.cssText += `

      --x0: ${xx}px;

      --y0: ${yy}px;

      --deg: ${360 / all * i}deg;

      background: #${Math.random().toString(16).substr(-6)};

      animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 2}s infinite var(--state);

    `;

    papa.prepend(movBall);

}
let mState = () => papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');

audio.addEventListener('playing',mState,false);

audio.addEventListener('pause',mState,false);
})();
</script>

klxf 发表于 7 天前

漂亮~谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 7 天前

klxf 发表于 2026-5-13 10:59
漂亮~谢谢醉美管理员精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 大火烧山