论坛 › 欢乐水吧 › 致敬劳动者节日快乐！

亚伦影音工作室 发表于 2026-5-1 10:11

致敬劳动者节日快乐！

本帖最后由 亚伦影音工作室 于 2026-5-11 12:38 编辑 <br /><br /><style>
      #bj {
            position: relative;
            width:1186px;
            height:680px;
            margin: 10px -300px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #66aa00;
            background:#800 url() no-repeat center / cover;--state:paused;
      }
#vid{width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}

#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;cursor: pointer;
      margin: 200px 160px;
      position: absolute;
      overflow: hidden;
      -state:paused;
      }
#bnt{margin: 640px 30px ; width: 20px; height: 20px;position: relative; cursor: pointer; z-index: 100;transition: all 1s;}
#cndpt{position: absolute; width: 100%; height: 100%;
   background:#eee;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%;
opacity:0;background:#eee;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#tmsg {position: absolute;
      font: 400 12px sans-serif;
      color: #eee;
         bottom: 24px;
      left:1080px;}
#prog {position:absolute;
      width: 85%;
      height: 2px;background:#eee;
      cursor: pointer;
         bottom: 30px;border-radius: 10px;
left:5%;}
#prog-bar {border-radius: 20px;
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

.hexahedron {width: 210px;border: 2px solid #555;
      height: 210px;
      margin: 0px 0px;
         position: relative;
      background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/646c86c7d5440c846a0f32e0c335d7a5.jpg)no-repeat -50px 0px/cover;
      border-radius: 12px;mask: radial-gradient(circle at 98% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 40px,red 0%); }

#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;background:repeating-radial-gradient(#000, #000 8px, #444 9px);border-radius: 50%;}
.overlay {z-index: 1;
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(-45deg, transparent, 35%, rgba(224,255,255,0.35),65%,transparent);
border-radius: 50%;
}


.inner {z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;

background:#5a4532 url()no-repeat center/cover;
border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #aa2;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
    left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lrc { z-index: 21; position: absolute; top: 16%; left: 48%; width: 540px; height: 450px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #eee; font: 400 20px 'YouYuan', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px;line-height: 50px;margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.2); color: #00FFaa; font-weight: 540; }
</style>
<div id="bj">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/661a7697255cfb55da1ee080bf4185be_preview.mp4" loop muted autoplay=""></video>
<div id="xiaobo">
<div class="hexahedron"></div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="77" dy="77" font-size="12" fill="#00ff00"font-family="'楷体'">
                <textPath href="#path" textLength="535"> 花潮论坛 亚伦影音工作室 </textPath>
        </text>
</svg>
</div> <div class="overlay"></div>
</div>
</div>
</div>
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="tmsg">00:00/00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>

<audio id="audio" src="https://static.oldkids.com.cn/upload/2026/05/01/blog_260855907_20260501130256762.mp3" loop autoplay ></audio>
<script>
      
var mState = () => audio.paused ?
( bnt.style.setProperty( 'paused'),bnt.title = '点击播放' ) :
( bnt.style.setProperty( 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
xiaobo.onclick=bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',all.style.left = '110px',all.style.animationPlayState = 'running',vid.play()) : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',all.style.left = '30px',all.style.animationPlayState = 'paused',vid.pause());


prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
audio.addEventListener('timeupdate', () => {
          varpercent= (audio.currentTime / audio.duration) * 100;
            progBar.style.width = percent + '%';
      });

audio.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});


let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
</script>

<script>
(function() {
      let lrc = `
作词：杨不乖/黄静美
作曲：黄静美
演唱：万能和弦
编曲/混音：YK
统筹：黄国书
制作人：何文宇
制作统筹：谌宥/金佳欣
宣发总监：王倩/黄超亚
宣发：一米星空x 靠谱音乐x 有点点
监制：王腾飞
艺人经纪：韦耀
发行人：韦琪
发行公司：万象星云
飒
嘿
它本是那绝境上的花 任风吹打
扎根在石头缝里生长 默默发芽
雨水拍在脸上
也只能仰着头
等光一照亮它就倔强的绽放
就算它生来万丈落差 又何妨
被冷眼旁观孤身一人 也不怕
没人撑腰的路 就靠自己拿下
做自己夹缝中生存的铠甲
我是悬崖上的花
怎敢奢求谁牵挂
半生风雨里挣扎
伤痛都自己咽下
我是悬崖上的花
怎敢盼望谁留下
路上本无依无挂
终有一天 我千锤百炼 野蛮生长
就算它生来万丈落差 又何妨
被冷眼旁观孤身一人 也不怕
没人撑腰的路 就靠自己拿下
做自己夹缝中生存的铠甲
我是悬崖上的花
怎敢奢求谁牵挂
半生风雨里挣扎
伤痛都自己咽下
我是悬崖上的花
怎敢盼望谁留下
路上本无依无挂
终有一天 我千锤百炼 野蛮生长
我是悬崖上的花
怎敢奢求谁牵挂
半生风雨里挣扎
伤痛都自己咽下
我是悬崖上的花
怎敢盼望谁留下
路上本无依无挂
终有一天 我千锤百炼 野蛮生长

`;
      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 / 2 + 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>

红影 发表于 2026-5-1 12:02

小播和底图一致呢，这个制作真漂亮。
欣赏亚伦老师好帖，节日快乐{:4_187:}

红影 发表于 2026-5-1 12:03

这个点击歌词也恩能够直接跳到播放位置呢，真神奇{:4_199:}

杨帆 发表于 2026-5-1 15:35

制作精致，效果精美，分享精彩，祝亚伦老师五一快乐{:4_176:}

梦油 发表于 2026-5-1 16:41

祝亚伦和朋友们节日快乐！

老谟深虑 发表于 2026-5-1 18:26

         制作精美，祝老师五一节快乐！

小辣椒 发表于 2026-5-2 13:05

欣赏亚纶精彩的制作{:4_187:}

小辣椒 发表于 2026-5-2 13:05

祝五一节快乐！

山里人 发表于 2026-5-2 16:30

欣赏佳作

老谟深虑 发表于 2026-5-4 12:06

杨帆 发表于 2026-5-1 15:35
制作精致，效果精美，分享精彩，祝亚伦老师五一快乐

         老师你好，请教一个问题，亚伦老师这个音画里的小播，我想移动却找不到代码里应该改变哪个参数？谢谢！

杨帆 发表于 2026-5-4 13:50

老谟深虑 发表于 2026-5-4 12:06
老师你好，请教一个问题，亚伦老师这个音画里的小播，我想移动却找不到代码里应该改变哪个参 ...

#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;cursor: pointer;
      margin: 200px 160px;
      position: absolute;
      overflow: hidden;
      -state:paused;
      }

老谟深虑老师好~

我也十分欣赏亚伦老师的美帖~源码示范，结构清晰，逻辑条理，值得学习~

你可以按自己需要调整#xiaobo的外边距属性值：margin: 200px 160px;

老谟深虑 发表于 2026-5-5 12:51

杨帆 发表于 2026-5-4 13:50
#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;cursor: pointer;


         非常感谢老师的指导，我试试看。

查看完整版本: 致敬劳动者节日快乐！