特效音画《珊瑚颂 (DJ俊海版)》,特效动画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 特效动画 › 特效音画《珊瑚颂 (DJ俊海版)》

醉美水芙蓉 发表于 2026-6-24 22:50:02

特效音画《珊瑚颂 (DJ俊海版)》

<meta charset="utf-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
:root { --color-1: #fff887; --color-2: #fc89e5; --color-3: #fd27d2; --color-4: #9cf9fc; --color-5: #0dd7de; --color-6: #fbcb6d; --color-7: #fb8739; --color-8: #fa5f57;}
.papa {position: relative; display: grid; place-items: center; margin: 30px 0; width: 1280px; height: 750px; left: calc(50% - 81px); transform: translateX(-50%); box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; background: #000 url('') no-repeat center/cover; font-family: "ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif";--state:running;}
#mySVG {width:500px;height:500px;z-index:2;top:16%;left:22%;position: absolute;animation:scale 12s ease infinite alternate var(--state); filter: drop-shadow(var(--shadow-offset) 0 0 rgba(255,20,147,.75)); --shadow-offset: clamp(400px, 35vh, 700px); }
.vid { position:absolute;z-index:0;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;object-position:center;}
#fullscreen{position:absolute;bottom:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;cursor: pointer;pointer-events: auto;opacity: 0;z-index:15;}
#fullscreen:hover{font-style:italic;}
#lyricDisplay{ height: 100%; letter-spacing: 0px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; padding: 0 1em; width: 100%;}
.lyrichar { display: inline-block; opacity: 0; animation: charAppear 0.5s forwards,hue-rotate 1.5s linear infinite; margin: 0 2px;}
#lyric { position:absolute; left: 50%; bottom: 15px; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; justify-content: center; height: 160px; width: 90%; text-align: center; filter:drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0); font: 3.5rem "Long Cang","ZCOOL KuaiLe","Ma Shan Zheng","华文行楷","SimHei", "Arial", sans-serif;}
.dop.lyrichar{animation-play-state: paused;}
button:active:not(:disabled) {transform: translateY(2px);box-shadow: 0 1px 0 rgba(0,0,0,0.15);}
button:hover{ transform: scale(1.1);transition: transform 0.12s ease;background:#F8F3EB !important;color:#007bff !important;font-weight: bold;}
#statusDisplay{position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:25%;top:13%;color:#fff;}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}} @keyframes hue-rotate {50%{ filter: hue-rotate(360deg); }}
@keyframes scale{0%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}20%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}40%{transform:translateX(-50%) perspective(800px) rotateY(-25deg) scale(1.2);}60%{transform:translateX(-50%) perspective(800px) rotateY(25deg) scale(1.2);}80%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}100%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}}
</style>
</head>
<body>
<div id="papa" class="papa">
<span id="fullscreen">全屏欣赏</span>
<button id="but" onclick="togglePlayPause()" style="position: absolute;min-width:120px;left:2%;top:2%;padding:10px 20px; font-size:16px; cursor:pointer; background:#007bff; color:#F8F3EB; border:none; z-index:12;border-radius:6px;title="✨暂停✨"></button>
<div id="lyric">
<div id="lyricDisplay"></div>
</div>
<audio id="aud" controls style="display: none;" ></audio>
<div id="statusDisplay">播放中: -2:20</div>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0669bee2c8ccb2adce6b11a6086134c7_preview.mp4" autoplay loop playsinline muted></video>
<svg id='mySVG' viewBox="-50 -50 330 330" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradColor">
   <stop offset="0" stop-color="red" />
   <stop offset="0.5" stop-color="green" />
   <stop offset="1" stop-color="violet" />
</linearGradient>
<pattern id="texPattern" width="15" height="15" patternUnits="userSpaceOnUse">
   <image
   href="https://638183.freep.cn/638183/small/hxxb.webp"
   width="15"
   height="15"
   crossorigin="anonymous"
   preserveAspectRatio="xMidYMid slice" >
   <animate attributeName="x" from="0" to="-15" dur="2s" repeatCount="indefinite" />
   </image>
</pattern>
<symbol id="pb" >
   <g stroke=url(#gradColor)
stroke-width= 1.5
stroke-linecap= round
stroke-linejoin= round
stroke-dasharray=2 4
stroke-dashoffset=0
opacity=1 ><path id="svg_3" fill="url(#texPattern)" d="m38.31086,191.09489c5.78428,-5.03518 10.69327,-11.03234 12.76673,-17.84143c-6.20066,3.92981 -11.88759,10.25068 -20.53719,10.01122c-6.52991,0.31242 -14.30852,0.31771 -18.90504,-4.23498c-10.27193,-6.88575 -13.03126,-20.64812 -4.5964,-29.41119c5.77215,-6.32728 15.85158,-9.01022 25.10159,-8.0612c5.82823,-2.06152 -1.13994,-7.28147 -1.8407,-10.53927c-4.33776,-11.81727 5.88126,-25.99187 20.90752,-27.35319c10.77769,-1.28985 21.31377,4.52632 26.58745,12.07447c2.86588,5.28158 1.37265,11.2758 0.70402,16.75508c-2.2516,2.75354 -8.01824,9.41507 0.21095,8.89036c8.1363,-0.10734 16.72834,1.88388 22.09349,7.27751c7.8475,7.26412 8.56734,19.26815 0.67194,26.69074c-4.17642,4.52106 -10.44352,8.13952 -17.53675,7.93807c-6.94261,0.58426 -14.46042,-0.6713 -19.38352,-5.0811c-2.09971,-1.22653 -7.2447,-5.86063 -7.24293,-4.84436c5.14256,8.93102 10.95766,18.20578 21.24511,23.74008c3.67562,2.46371 -5.59854,0.76988 -7.84365,1.27202c-13.60279,0.01002 -27.20552,0.02024 -40.80831,0.03031c2.80187,-2.43774 5.60392,-4.87538 8.40568,-7.31313z">
<animate attributeName="stroke-dashoffset" from="0" to="-180" begin="0s" dur="8s" repeatCount="indefinite" />
   </path>
   </g>
</symbol>
</defs>
<use href="#pb" x="0" y="0"></use>
<use href="#pb" x="115" y="-105"></use>
<use href="#pb" x="115" y="0"></use>
<use href="#pb" x="0" y="-105"></use>
</svg>
</div>
<script>
(function(){
const audioPlayer = document.getElementById('aud');
const lyricDisplay = document.getElementById('lyricDisplay');
let currentLyricIndex = -1;
let isUpdating = false;
let lyrics = [];
const lrcText = `
珊瑚颂 (DJ俊海版) - 杨西音子
词：赵忠/钟艺兵/林荫梧/单文
曲：胡士平/王锡仁
LRC编辑：醉美水芙蓉
一树红花照碧海
一团火焰出水来
珊瑚树红春常在
风波浪里把花开哎
云来遮雾来盖
云里雾里放光彩
风吹来浪打来
风吹浪打花常开哎
一树红花照碧海
一团火焰出水来
珊瑚树红春常在
风波浪里把花开哎
云来遮雾来盖
云里雾里放光彩
风吹来浪打来
风吹浪打花常开哎
谢谢欣赏！
`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const lrcRegex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
lines.forEach(line => {
   const match = line.match(lrcRegex);
   if (match) {
         const minutes = parseInt(match);
         const seconds = parseInt(match);
         const ms = parseInt(match);
         const totalSeconds = minutes * 60 + seconds + ms / 100;
         const text = match.trim();
         lyrics.push({time: totalSeconds, text: text});
   }
});
return lyrics;
}

function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)', 'var(--color-2)', 'var(--color-3)',
                  'var(--color-4)', 'var(--color-5)', 'var(--color-6)'];
chars.forEach((char, i) => {
   const span = document.createElement('span');
   span.className = 'lyrichar';
   span.style.color = colorList;
   if (char === ' ') {
         span.innerHTML = ' ';
   } else {
         span.textContent = char;
   }
   const offset = i === 0 ? 0 : i * 30;
   span.style.transform = `translateY(${offset}px)`;
   span.style.animationDelay = `${i * 0.08}s`;
   if (/[，。！？,.!?]/.test(char)) {
         span.style.animationDelay = `${i * 0.08 + 0.08}s`;
   }
   lyricDisplay.appendChild(span);
});
}

function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
const allLyricChars = document.querySelectorAll('.lyrichar');
allLyricChars.forEach(charSpan => charSpan.classList.add('dop'));
}

lyrics = parseLrc(lrcText);
audioPlayer.src = "https://www.joy127.com/url/153968.mp3";

audioPlayer.addEventListener('loadedmetadata', () => {
if (audioPlayer.duration) {
   const initRemain = audioPlayer.duration;
   statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-initRemain)}</span>`;
}
});
audioPlayer.addEventListener('timeupdate', () => {
if (isUpdating) return;
isUpdating = true;

setTimeout(()=>isUpdating=false,100);
   const currentTime = audioPlayer.currentTime;
   if(!audioPlayer.paused && audioPlayer.duration) renderPlayTime();
for (let i = 0; i < lyrics.length; i++) {
   const currentLyricTime = lyrics.time;
   const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
   if (currentTime >= currentLyricTime - 0.3 && currentTime < nextLyricTime + 0.3) {
         if (currentLyricIndex !== i) {
            currentLyricIndex = i;
            displayLyricCharByChar(lyrics.text);
         }
         break;
   }
}
});

audioPlayer.addEventListener('ended', () => {
resetLyrics();
audioPlayer.currentTime = 0;
isPaused = false;
audioPlayer.play().catch(err => console.log("自动重播播放失败", err));
});

})();

const wave = document.getElementById('mySVG');
const papa = document.getElementById('papa');
const but = document.getElementById('but');
const vids = document.querySelectorAll('video');
const audioPlayer = document.getElementById('aud');
const statusDisplay = document.getElementById('statusDisplay');

let isPaused = true;

function togglePlayPause() {
const allLyricChars = document.querySelectorAll('.lyrichar');
but.innerText = isPaused ? "\u2728暂停\u2728" : "\u2728开启\u2728";
papa.style.setProperty('--state', isPaused ? 'running' : 'paused');
vids.forEach(vid => isPaused ? vid.play() : vid.pause() );

if (isPaused) {
isPaused = false;
audioPlayer.play().catch(e=>console.log('播放异常',e));
wave.unpauseAnimations();
allLyricChars.forEach(charSpan => charSpan.classList.remove('dop'));
statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-(audioPlayer.duration-audioPlayer.currentTime))}</span>`;
} else {
isPaused = true;
audioPlayer.pause();
wave.pauseAnimations();
allLyricChars.forEach(charSpan => charSpan.classList.add('dop'));
statusDisplay.textContent = '已暂停';
}
}

function formatTime(seconds) {
const abs = Math.abs(seconds);
const m = Math.floor(abs/60);
const s = Math.floor(abs%60);
return `${seconds<0?'-':''}${m}:${s<10?'0':''}${s}`;
}

function renderPlayTime() {
   if(!audioPlayer.duration) return;
   const rem = audioPlayer.duration - audioPlayer.currentTime;
   statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-rem)}</span>`;
}

let fs = true,fsTimer,butTimer;
fullscreen.onclick = ()=>{
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
clearTimeout(butTimer);
fullscreen.style.opacity = '1';
but.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
butTimer = setTimeout(() => but.style.opacity = '0', 2500);
});

document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audioPlayer.paused) audioPlayer.pause();
} else {
if (audioPlayer.paused && !audioPlayer.ended) audioPlayer.play().catch(()=>{});
}
});

['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
papa.addEventListener(ev, (e) => { e.preventDefault(); })
);
window.addEventListener('load', ()=>{
setTimeout(function(){togglePlayPause()},500);
})
</script>

月明工作室 发表于 2026-6-25 08:16:39

欣赏芙蓉老师作品、上午好！

醉美水芙蓉 发表于 2026-6-25 18:44:25

月明工作室发表于 2026-6-25 08:16
欣赏芙蓉老师作品、上午好！

谢谢明月老师光临！

klxf 发表于 2026-6-26 15:58:01

效果漂亮~谢谢精彩分享

醉美水芙蓉 发表于 2026-6-28 17:26:27

klxf 发表于 2026-6-26 15:58
效果漂亮~谢谢精彩分享

谢谢友友光临！

页: [1]

查看完整版本: 特效音画《珊瑚颂 (DJ俊海版)》