醉美水芙蓉 发表于 2026-5-4 21:59:00

特效音画《心向旷野》

<meta charset="utf-8">
<style>
      #bj {
            position: relative;
            width:1186px;
            height:680px;
            margin: 10px -200px;
            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/97001387e190b52cf36fd012c5d01c48.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: 58%; 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/53b4e149ea039f14fded82e4e9a04f27_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://www.joy127.com/url/149650.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 = `
心向旷野
演唱：Yang.Lc
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 / 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>

klxf 发表于 2026-5-5 14:11:12

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

月明工作室 发表于 2026-5-6 08:57:46

欣赏芙蓉老师制作精彩！

醉美水芙蓉 发表于 2026-5-6 19:31:48

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

谢谢友友光临！

醉美水芙蓉 发表于 2026-5-6 19:32:13

月明工作室 发表于 2026-5-6 08:57
欣赏芙蓉老师制作精彩！

谢谢老师光临！
页: [1]
查看完整版本: 特效音画《心向旷野》