亚伦影音工作室 发表于 2026-6-1 11:43

六一儿童节快乐即兴制作

本帖最后由 亚伦影音工作室 于 2026-6-1 11:43 编辑 <br /><br /><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: #191970; 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: 2;background:url(https://pic1.imgdb.cn/item/6a1cf2bb6aa5b6be4f5f58dc.png)no-repeat 160px 350px/30%,url(https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png)no-repeat center/20%;
top:0%; left:0%;
animation: rod 10s linear infinite var(--state);}
@keyframes rod{0% {opacity: 0.6;filter:hue-rotate(60deg);}
50% {opacity:1 ;}
100% {opacity: 0.6;}
}

li-zi { position: absolute; width: 100px; height: 0.5px; border-radius:100%50%;background: #fff000;animation: imov 2s infinite;z-index: 1;}
@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 controlslist="nodownload">
            <source src="https://music.163.com/song/media/outer/url?id=1915263811.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 = ` 作词 : 邬大为/魏宝贵
作曲 : 傅庚辰
红星歌
红星闪闪放光彩
红星灿灿暖胸怀
红星是咱工农的心
党的光辉照万代
红星是咱工农的心
党的光辉照万代
长夜里红星闪闪驱黑暗
寒冬里红星闪闪迎春来
斗争中红星闪闪指方向
征途上红星闪闪把路开
红星闪闪放光彩
红星灿灿暖胸怀
跟着毛主席跟着党
闪闪的红星传万代
跟着毛主席跟着党
闪闪的红星传万代`;

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>

红影 发表于 2026-6-1 13:49

光芒四射的红星，照亮了前行的道路。
欣赏亚伦老师好帖，借帖同祝大朋友小盆友们节日快乐{:4_187:}

梦油 发表于 2026-6-1 17:01

能够这样经久传唱的歌曲真不多了。

梦风雨 发表于 2026-6-1 17:49

六一快乐

老谟深虑 发表于 2026-6-1 19:03

六一快乐！
页: [1]
查看完整版本: 六一儿童节快乐即兴制作