【声波·音画】2026美好盛开

杨帆发表于 2025-12-30 13:30

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>苍狼《2026美好盛开》</title>
</head>
<body>
<style>
#papa{margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);background: #3F5EFB radial-gradient(circle,rgba(63, 94, 251, 3) 0%, rgba(252, 70, 107, 5) 100%) no-repeat center/cover;width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;border-radius:20px;box-shadow:0px 0px 0px 2px #000000, 0px 0px 15px 15px #006000; overflow: hidden; position: relative; display: grid; place-items: center; user-drag: none; user-select: none; --state:running;z-index:1;}
#papa > p {position: absolute; z-index: 4;font: bold 70px 华文行楷;color: white;mix-blend-mode: difference;transform-origin: center center;animation:rotatinga 6s infinite linear var(--state);}
#papa::before { position: absolute; content: url('https://pic1.imgdb.cn/item/6850355758cb8da5c851dd59.webp'); scale: 0.3; opacity: 0;transition: 1.8s; display:var(--display); }
#papa:hover::before { opacity: 1; scale: 1.2; }
@keyframes rotatinga{0%{transform:rotate(-90deg);}25%{transform:rotate(0deg);}50%{transform:rotate(90deg);}75%{transform:rotate(0deg);}100%{transform:rotate(-90deg);}}
#tit {position: absolute; top:50%;font: bold 70px 华文行楷;color: transparent; background-image: linear-gradient(180deg, #fff,#00ff00,#fff000); background-size: 400px 100px;-webkit-background-clip:text; animation: rotatingb 6s infinite linear var(--state);transform-origin: center center; }
@keyframes rotatingb{0%{transform:rotate(90deg),background-position: 0px -2500px;}25%{transform:rotate(0deg);filter:hue-rotate(360deg)contrast(200%)brightness(110%);}50%{transform:rotate(-90deg);}75%{transform:rotate(0deg);filter:hue-rotate(360deg)contrast(200%)brightness(110%);}100%{transform:rotate(90deg), opacity: 1;background-position: 0px -1000px ;}}
#vid {position: absolute;inset:0;left:-20%; top:-20%;width: 140%;height:140%; object-fit: cover;pointer-events: none;opacity: .9;mix-blend-mode: overlay;object-position:center;}
.vid {position: absolute;inset:0;left:-20%; top:-20%;width: 140%;height:140%;object-fit: cover;pointer-events: none;opacity: .5;mix-blend-mode: overlay;object-position:center;}
#mdiv {position: absolute;top:50px;right:50px;z-index:10;width: 80px;height:80px;display: grid; place-items: center; filter: drop-shadow(0 0 1px #8A2BE2);animation: rot 3s linear infinite var(--state);transition:opacity 0.3s; cursor: pointer;pointer-events: auto;}
#mdiv:hover{ animation-play-state:paused !important; }
#mdiv > span {position: absolute;top:50%left:50%;width: 50%; height: 50%; background: linear-gradient(75deg,#FAFAD2 1%,#7CFC00,#ADFF2F,#32CD32, #FFD700);border-radius: 100% 0;transform: rotate(var(--deg)) translate(21.5px,-50%); }
#mdiv > span:nth-of-type(1) { --deg: 0deg; }
#mdiv > span:nth-of-type(2) {--deg: 72deg;}
#mdiv > span:nth-of-type(3) { --deg: 144deg;}
#mdiv > span:nth-of-type(4) {--deg: 216deg;}
#mdiv > span:nth-of-type(5) {--deg: 288deg;}
@keyframes rot { to { transform: rotate(1turn); } }
#mdiv:hover { filter: unset !important; }
#img-border { width:100%;height:100%;position: absolute;--state: running;animation:rotating 10s linear infinite var(--state);z-index:8;display:var(--display);background:url('https://s3.bmp.ovh/imgs/2025/12/10/c07560482d338ee0.png') no-repeat center/80% 80%; }
@keyframes rotating{ 0% {opacity: 1;transform: scale(.8);} 10% {opacity: 1;transform: scale(.6);filter:hue-rotate(360deg)contrast(120%)brightness(120%);} 20% {opacity: 1;transform: scale(1.5);} 60% {opacity: 0;transform: scale(.6)rotateY(-45deg);} 70% {opacity: 1;transform: scale(.8)rotateY(-45deg);filter:hue-rotate(360deg)contrast(120%)brightness(120%);} 80% {opacity: 1;transform: scale(3)rotateY(-45deg);} 100% {opacity: 0;transform:scale(1)rotateY(-45deg);} }
#fullscreen { position: absolute; top: 30px;left: 30px; font: normal 1.5em 楷体; color: #fff; text-shadow: 0 0 3px #000; opacity: 1; cursor: pointer; user-select: none; z-index: 8; }
#fullscreen:hover { font-style: italic; }
#lrc { --state:running; --motion: cover2; --tt: 2s; --bg: linear-gradient(0deg, #ff0000, #ff6600, #ffff00); position: absolute; z-index: 6;right: 3%; top: 25%; transform: translateX(-50%); font: normal 2.8em 华文新魏; font-weight: 400; color:#8A2BE2; white-space: pre; writing-mode: vertical-lr; background-clip: text;-webkit-background-clip: text; filter: drop-shadow(#FFFFFF 1px 0 0) drop-shadow(#FFFFFF 0 1px 0) drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0); --rect:0 0 100% 0;--border:0 1px 0 0;--c2:#F5F5F5;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;animation-play-state: var(--state); background: var(--bg); clip-path: inset(0 0 100% 0); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state);clip-path:inset(var(--rect));border:0px groove var(--c2);border-width:var(--border);}
@keyframes cover1 { to { clip-path: inset(0 0 0 0); } } @keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
.dancer{position: absolute;mix-blend-mode:screen;width: 200px; height: 200px; left: 1%; bottom:2%; opacity:1; z-index: 8;cursor: pointer;display:var(--display); transition: .3s;}
#prog { position: absolute;left:30%;bottom: 5%; z-index: 18;filter:invert(100%)hue-rotate(300deg);background: #3F5EFB;width: 40%;height: 5px;cursor: pointer;pointer-events: auto;display:var(--display);}
#tmsg { position: absolute;right:22%;bottom: 5%;z-index: 8;font: normal 13px sans-serif;color: #fff;display:var(--display);}
#ptxt{ position: absolute;left:25%;bottom:5%; z-index: 8;font: normal 13px sans-serif;color: #fff;display:var(--display);}
</style>
<div id="papa">
<progress id="prog"></progress>
<div id="ptxt">0%</div>
<div id="tmsg">00:00|00:00</div>
<div id="img-border" ></div>
<div data-lrc="" id="lrc"></div>
   <span id="fullscreen">全屏欣赏</span>
<p id="tit1">辞旧迎新乐在花潮一马当先</p>
<div id="tit">平安健康家庭幸福快乐天天</div>
<video id="vid" src="https://link.hhtjim.com/163/5364985.mp4" autoplay loop muted></video>
<video class="vid" src="https://video.699pic.com/videos/46/46/47/b_AXWhKpkbXIrQ1558464647_10s.mp4" autoplay loop muted></video>
<img class="dancer" src="https://pic1.imgdb.cn/item/67938d5ed0e0a243d4f7a236.gif" alt="" / title = '暂停'; >
<div id="mdiv" title = '暂停';>
<span></span> <span></span> <span></span> <span></span> <span></span>
</div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/638cde1f84781b47f83c932c0a71f4e6.mp3" autoplay loop></audio>
</div>
<script>
   const mdiv = document.getElementById('mdiv');
   const aud = document.getElementById('aud');
   const vids = document.querySelectorAll(', .vid');
   const tit1 = document.getElementById('tit1');
   const tit = document.getElementById('tit');
   const fullscreen = document.getElementById('fullscreen');
   const papa = document.getElementById('papa');
   const lrc = document.getElementById('lrc');
   const dancer = document.querySelectorAll('.dancer');
   const imgBorder = document.getElementById('img-border');
   mdiv.onclick = () => {
         if (aud.paused) {
            aud.play();
         vids.forEach(vid => vid.play());
            dancer.forEach(item=> {item.style.setProperty('--display', '');});
            papa.style.setProperty('--display', '');
            imgBorder.style.setProperty('--display', '');
            imgBorder.style.setProperty('--state', 'running');
         mdiv.style.animationPlayState = 'running';

            tit.style.animationPlayState = 'running';
            tit1.style.animationPlayState = 'running';
            lrc.style.setProperty('--state', 'running');
         } else {
            aud.pause();
            vids.forEach(vid => vid.pause());
   dancer.forEach(item=> {item.style.setProperty('--display', 'none');});
   papa.style.setProperty('--display', 'none');
      imgBorder.style.setProperty('--display', 'none');
      imgBorder.style.setProperty('--state', 'paused');
            tit.style.animationPlayState = 'paused';
            tit1.style.animationPlayState = 'paused';
            mdiv.style.animationPlayState = 'paused';
            lrc.style.setProperty('--state', 'paused');
      }
         mdiv.title = aud.paused ? '播放' : '暂停';
         dancer.forEach(item => {
item.title = '暂停';
});
      };

dancer.forEach(item => {
item.onclick = () => mdiv.click();
});

   (function() {
         const lrcStr = `

2026 美好盛开
演唱：苍狼
作词：小浮
作曲：徐嘉良
出品：琴音造梦
OP：海酝
苍狼《2026美好盛开》
旧的一年去新的一年来
祝福写成歌飘向了未来
我们举起杯举杯敬沧海
愿2026 美好都盛开
你种下的梦会开出花海
你画的远方正奔你而来
阳光会驱散前路的阴霾
时光终会把你温柔对待
愿你所有梦想不负期待
愿你前路有爱的人相伴
愿你真诚的心永远澎湃
穿过风雪就是春暖花开
愿2026 烦恼都释怀
好运连连财运都相伴
平凡的生活也散发光彩
每个明天都沐光而来
旧的一年去新的一年来
祝福写成歌飘向了未来
我们举起杯举杯敬沧海
愿2026 美好都盛开
你种下的梦会开出花海
你画的远方正奔你而来
阳光会驱散前路的阴霾
时光终会把你温柔对待
愿2026 烦恼都释怀
好运连连财运都相伴
平凡的生活也散发光彩
每个明天都沐光而来

         `;
         let mKey = 0;
         let mFlag = true;
         const averAdd = 0.3;
         let lrcAr = [];
         const lrcTime = (ar) => {
            const tmpAr = [];
            for (let j = 0; j < ar.length; j++) {
               if (j < ar.length - 1) {
                     tmpAr = parseFloat((ar - ar).toFixed(1));
               } else {
                     const avg = tmpAr.reduce((a, b) => a + b) / tmpAr.length;
                     tmpAr = parseFloat(avg.toFixed(1));
               }
            }
            tmpAr.forEach((item, key) => {
               ar = item;
            });
            return ar;
         };
         const getLrcAr = (text) => {
            const arr = [];
            const calcRule = ;
            const lines = text.split('\n');
            lines.forEach(line => {
               const geci = line.replace(/\d+[\.:]\d+([\.:]\d+)?/g, '').replace(/[\[\]\'\"\t,]s?/g, '').trim();
               if (!geci) return;
               const timeMatch = line.match(/\d+[\.:]\d+([\.:]\d+)?/g);
               if (!timeMatch) return;
               timeMatch.forEach(timeStr => {
                     const timeArr = timeStr.match(/\d+/g);
                     let sec = 0;
                     timeArr.forEach((val, idx) => {
                        sec += val * calcRule;
                     });
                     arr.push();
               });
            });
            arr.sort((a, b) => a - b);
            return lrcTime(arr);
         };
         const showLrc = (time) => {
            if (mKey >= lrcAr.length) mKey = 0;
            const name = mFlag ? 'cover1' : 'cover2';
            lrc.innerText = lrcAr;
            lrc.dataset.lrc = lrcAr;
            lrc.style.setProperty('--motion', name);
            lrc.style.setProperty('--tt', time + 's');
            lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
            mKey++;
            mFlag = !mFlag;
         };
         const calcKey = () => {
            for (let j = 0; j < lrcAr.length; j++) {
               if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
               }
            }
            if (mKey < 0) mKey = 0;
            if (mKey >= lrcAr.length) mKey = lrcAr.length - 1;
            const time = lrcAr - (aud.currentTime - lrcAr);
            showLrc(time);
         };
         lrcAr = getLrcAr(lrcStr);
         aud.addEventListener('timeupdate', () => {
            if (aud.paused) return;
            for (let j = mKey; j < lrcAr.length; j++) {
               if (aud.currentTime >= lrcAr && mKey === j) {
                     showLrc(lrcAr);
                     break;
               }
               if (mKey >= lrcAr.length) {
                     mKey = 0;
               }
            }
         });
         aud.addEventListener('pause', () => {
            lrc.style.setProperty('--state', 'paused');
         });
         aud.addEventListener('play', () => {
            lrc.style.setProperty('--state', 'running');
         });
         aud.addEventListener('seeked', calcKey);
         showLrc(lrcAr);
   })();
   let fs = true;
   let fsTimer;
   fullscreen.onclick = () => {
         fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
         fs = !fs;
   };
   papa.addEventListener('mousemove', () => {
         clearTimeout(fsTimer);
         fullscreen.style.opacity = '1';
         fsTimer = setTimeout(() => {
            fullscreen.style.opacity = '0';
         }, 3000);
   });
document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;
fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';
});
mdiv.onanimationiteration = () =>mdiv.style.setProperty('filter', `hue-rotate(${45 + Math.random() * 120}deg)`);
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
aud.addEventListener('timeupdate', () => {
         tmsg.innerText = toMin(aud.currentTime) + '/' + toMin(aud.duration);
   });
   function toMin(val) {
         if (!val) return '00:00';
         val = Math.floor(val);
         let min = parseInt(val / 60);
         let sec = parseFloat(val % 60);
         if (min < 10) min = '0' + min;
         if (sec < 10) sec = '0' + sec;
         return min + ':' + sec;
   }
   aud.addEventListener("timeupdate",function(){
var percent= aud.currentTime / aud.duration
var sp = 600 / 100 ;
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})
</script>
</body>
</html>

小九发表于 2025-12-30 13:39

音画色彩鲜艳，对未来的祝福，歌也非常好听且有共鸣。感谢杨帆老师带来的精彩{:4_187:}

霜染枫丹 发表于 2025-12-30 13:50

喜庆的画面，祥和的歌声，喜欢这好制作，赞佩！！{:4_204:}{:4_190:}

杨帆发表于 2025-12-30 14:26

小九发表于 2025-12-30 13:39
音画色彩鲜艳，对未来的祝福，歌也非常好听且有共鸣。感谢杨帆老师带来的精彩

问好小九，谢谢鼓励，祝新年快乐{:4_204:}

杨帆发表于 2025-12-30 14:26

霜染枫丹发表于 2025-12-30 13:50
喜庆的画面，祥和的歌声，喜欢这好制作，赞佩！！

问好枫丹，谢谢鼓励，祝新年快乐{:4_204:}

梦江南 发表于 2025-12-30 14:54

分没有了，不好意思。
喜庆，漂亮，有创意的制作，欣赏学习！{:4_187:}

杨帆发表于 2025-12-30 15:01

梦江南发表于 2025-12-30 14:54
分没有了，不好意思。
喜庆，漂亮，有创意的制作，欣赏学习！
分没有了表明江南互动积极呀，谢谢鼓励，互相学习，开心天天{:4_204:}

偶然~ 发表于 2025-12-30 16:34

音画唯美

偶然~ 发表于 2025-12-30 16:34

制作大气

偶然~ 发表于 2025-12-30 16:34

元旦快乐！祝您身体倍棒，心情倍好，好运连连挡不住！

杨帆发表于 2025-12-30 18:55

偶然~ 发表于 2025-12-30 16:34
元旦快乐！祝您身体倍棒，心情倍好，好运连连挡不住！

问好偶然~，谢谢鼓励，祝新年快乐{:4_191:}

梦油发表于 2025-12-30 19:18

色彩鲜艳。精彩纷呈。

杨帆发表于 2025-12-30 19:41

梦油发表于 2025-12-30 19:18
色彩鲜艳。精彩纷呈。

问好梦兄，谢谢鼓励，祝新年快乐{:4_190:}

梦油发表于 2025-12-30 20:07

杨帆发表于 2025-12-30 19:41
问好梦兄，谢谢鼓励，祝新年快乐

杨帆朋友别客气。

红影发表于 2025-12-30 22:32

漂亮的制作，寓意美好的歌曲。
欣赏杨帆好帖{:4_199:}

杨帆发表于 2025-12-30 23:34

红影发表于 2025-12-30 22:32
漂亮的制作，寓意美好的歌曲。
欣赏杨帆好帖

谢谢影子鼓励，祝元旦快乐、马年大吉{:4_204:}

页: [1]

花潮论坛's Archiver

【声波·音画】2026美好盛开