首页 › 音画作品 › 蓝莲花 - 卡兰迪【雷鬼版】

亚伦影音工作室 发表于 2026-6-12 13:19

蓝莲花 - 卡兰迪【雷鬼版】

本帖最后由 亚伦影音工作室 于 2026-6-12 16:23 编辑 <br /><br /><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 { --ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8; }
#papa { position: relative;display: grid;place-items: center;margin:30px 0;width:1084px;height:600px;left:calc(50% - 71px);transform:translateX(-50%);box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:#000 url() no-repeat center/cover;font-family:"Liu+Jian Mao Cao","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif";color: white;--state: paused; }
.dancer { position:absolute;z-index:1;left:0px; top:0px; width:100%; height:100%;}
.pancer { position:absolute;z-index:20;left:82%; top:87%; width:10%; height:10%;mix-blend-mode: lighten; }
main {z-index: 2;
position: relative;
overflow: hidden;
width: 100%;
min-height: 100%;
perspective: 340px;
}

#stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;border-radius: 50%;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fff,
    145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
    212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
    308px 126px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
    671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
    1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
    311px -475px #fff, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
    -790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
    -1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
    -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
    -1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
    36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
    1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
    624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
    410px 455px #ebebeb, 497px -129px #cccccc, 416px -370px whitesmoke,
    977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
    -1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
    -437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
    -925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
    993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
    -170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
    -1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
    1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
    1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
    1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
    -997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
    -468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
    823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
    94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
    1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
    1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
    205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
    649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
    -1405px 397px #cfcfcf, 30px -81px #e6e6e6;
animation: fly 3s linear infinite var(--state);
transform-style: preserve-3d;
}
#stars:before,
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite var(--state);
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite var(--state);
}
@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.5;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0;
}
to {
    opacity: 0.5;
}
}
#lyric { position:absolute;bottom:3%;left: calc(50% - 50px); transform: translateX(-50%); z-index:12;display:flex;flex-direction:column;justify-content:center;height:160px;width:80%;text-align:center;filter:drop-shadow(#000 0 0 2px)drop-shadow(#000 0 0 2px);font-size:3.3em; }
#lyricDisplay { height:100%;letter-spacing:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:0 1em;width:100%;animation:hue-rotate 0.5s linear infinite; }
.lyrichar { display:inline-block;opacity:0;animation:charAppear 0.5s forwards;margin:0 2px; }
@keyframes charAppear { to{opacity:1;transform:translate(0%);} }
@keyframes hue-rotate { to{filter:hue-rotate(360deg);} }
#statusDisplay { position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:25%;top:15%;color:#fff; }
#fullscreen { border-radius:4px;position:absolute;color:DarkGray;padding:4px 8px;z-index:12;font-size:25px;border:none;cursor:pointer;top:25px;left:25px;background:transparent; }

#msvg { position:absolute;top:5%;left:70%;z-index:12;cursor:pointer;width:10vmax;height:10vmax;display:grid;place-items:center; margin: 20px auto;transition: .98s; filter: brightness(1.5);}
#msvg:hover { filter: unset !important; }
#msvg path { stroke-dasharray: var(--len);stroke-dashoffset: var(--len);animation: draw 2s var(--delay) forwards, fill 1s calc(var(--delay) + 2s) forwards; }
.rotate { animation: rotate 6s 0.5s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to { fill: url(#grd); } }
</style>
<div id="papa">
<img class="dancer" data-gif="https://pan.29o.cn/view.php/a568e38626761c212e295d0de857abc6.gif" data-png="https://pan.29o.cn/view.php/3dc7f39fc8350f0bf4db8c4bd8aab656.png" src="https://pan.29o.cn/view.php/a568e38626761c212e295d0de857abc6.gif">
<img class="pancer" data-gif="https://pic1.imgdb.cn/item/665ba41ed9c307b7e9c165af.gif" data-png="https://pic1.imgdb.cn/item/66c414c0d9c307b7e92555b8.jpg" src="https://pic1.imgdb.cn/item/665ba41ed9c307b7e9c165af.gif">

<div id="fullscreen">全屏欣赏</div>
<main>
<div id="stars"></div>
</main>

<div id="statusDisplay">播放中: -2:20</div>

<div id="lyric"><div id="lyricDisplay"></div></div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3388637500.mp3" loop autoplay></audio>
<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   <title>播放/暂停</title>
   <defs>
   <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
       <stop offset="0%" stop-color="#ff0000"></stop>
       <stop offset="50%" stop-color="FF0000"></stop>
       <stop offset="100" stop-color="#fffa00"></stop>
   </linearGradient>
   </defs>
   <g id="g1"></g>
</svg>
</div>
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const msvg = document.getElementById('msvg');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');
const fullscreen = document.getElementById('fullscreen');
let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let sparkleInterval = null;
function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random()*100;
const y = Math.random()*100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random()*2}s`;
sparkle.style.setProperty('--tx', `${(Math.random()-0.5)*80}px`);
sparkle.style.setProperty('--ty', `${(Math.random()-0.5)*80}px`);
const currentVolume = audioPlayer.volume;
const currentTime = audioPlayer.currentTime || 0;
const baseSize = 6;
const sizeMultiplier = 1+(currentVolume*1.5);
const finalSize = baseSize*sizeMultiplier;
sparkle.style.width = `${finalSize}px`;
sparkle.style.height = `${finalSize}px`;
const beat = Math.sin(currentTime*8)*0.5+0.5;
const colors = ['#fff887','#fc89e5','#fd27d2','#9cf9fc','#0dd7de','#fbcb6d','#fb8739','#fa5f57'];
const colorIndex = Math.floor((currentTime*10+beat*5)%colors.length);
const randomColor = colors;
sparkle.style.background = randomColor;
sparkle.style.boxShadow = `0 0 10px ${randomColor},0 0 20px ${randomColor}`;
sparklesContainer.appendChild(sparkle);
setTimeout(()=>{
    if(sparkle && !sparkle.classList.contains('hidden')) sparkle.remove();
},3000);
}
function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for(let i=0;i<50;i++) createSingleSparkle();
sparkleInterval = setInterval(()=>{
    if(window.isPlaying) createSingleSparkle();
},200);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(el=>el.classList.add('hidden'));
setTimeout(()=>sparklesContainer.innerHTML='',800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}

const mState = ()=>{
const list = document.querySelectorAll('.dancer');
const state = audioPlayer.paused ? 'paused' : 'running';
const lista = document.querySelectorAll('.pancer');
const paths = document.querySelectorAll('#msvg path');
const rotateG = document.getElementById('g1');
if (audioPlayer.paused) {
    paths.forEach(p => p.style.animationPlayState = 'paused');
    if (rotateG) rotateG.style.animationPlayState = 'paused';
    lyricDisplay.style.animationPlayState = 'paused';
} else {
    paths.forEach(p => p.style.animationPlayState = 'running');
    if (rotateG) rotateG.style.animationPlayState = 'running';
    lyricDisplay.style.animationPlayState = 'running';
}
list.forEach(el => {
    if(el.dataset.gif && el.dataset.png){
      el.src = audioPlayer.paused ? el.dataset.png : el.dataset.gif;
    }
});
lista.forEach(ef => {
    if(ef.dataset.gif && ef.dataset.png){
      ef.src = audioPlayer.paused ? ef.dataset.png : ef.dataset.gif;
    }
});
msvg.style.animationPlayState = state;
intro.style.animationPlayState = state;
lyricDisplay.style.animationPlayState = state;
};
function togglePlayPause() {
if(audioPlayer.paused){
    if(audioPlayer.currentTime <= 0.5) resetLyrics();
    audioPlayer.play().then(()=>{
      window.isPlaying = true;
      statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-(audioPlayer.duration-audioPlayer.currentTime))}</span>`;
      startSparkleLoop();
      mState();
    }).catch(err=>{
      console.error('播放失败',err);
      statusDisplay.textContent = '播放失败';
    });
}else{
    audioPlayer.pause();
    window.isPlaying = false;
    statusDisplay.innerHTML = '<span style="color:#CC00FF">已暂停</span>';
    fadeOutAllSparkles();
    mState();
}
msvg.title = audioPlayer.paused ? '播放' : '暂停';
}
msvg.addEventListener('click',e=>{
e.stopPropagation();
togglePlayPause();
});
audioPlayer.addEventListener('play',mState);
audioPlayer.addEventListener('pause',mState);
audioPlayer.play().catch(_ => mState());
msvg.title = '暂停';
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;
    span.innerHTML = char === ' ' ? '&nbsp;' : char;
    span.style.transform = `translateY(${i===0?0:i*30}px)`;
    let delay = i*0.08;
    if(/[，。！？,.!?]/.test(char)) delay += 0.08;
    span.style.animationDelay = `${delay}s`;
    lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate',()=>{
if(!window.isPlaying || isUpdating) return;
isUpdating = true;
setTimeout(()=>isUpdating=false,100);
const current = audioPlayer.currentTime;
const remaining = audioPlayer.duration - current;
statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-remaining)}</span>`;
for(let i=0;i<lyrics.length;i++){
    const now = lyrics.time;
    const next = i<lyrics.length-1 ? lyrics.time : Infinity;
    if(current >= now-0.3 && current < next+0.3){
      if(currentLyricIndex !== i){
      currentLyricIndex = i;
      displayLyricCharByChar(lyrics.text);
      }
      break;
    }
}
});
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}`;
}
const lrcText = `蓝莲花 - 卡兰迪
亚伦影音工作室
没有什么能够阻挡
你对自由的向往
天马行空的生涯
你的心了无牵挂
穿过幽暗的岁月
也曾感到彷徨
当你低头的瞬间
才发觉脚下的路
心中那自由的世界
如此的清澈高远
盛开着永不凋零
蓝莲花
穿过幽暗的岁月
也曾感到彷徨
当你低头的瞬间
才发觉脚下的路
穿过幽暗的岁月
也曾感到彷徨
当你低头的瞬间
才发觉脚下的路
心中那自由的世界
如此的清澈高远
盛开着永不凋零
蓝莲花/name/c
`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const reg = /\[(\d{2}):(\d{2})(?:\.(\d{2}))?\](.*)/;
lines.forEach(line=>{
    const m = line.match(reg);
    if(m){
      const t = +m*60 + +m + +m/100;
      lyrics.push({time:t, text:m.trim()});
    }
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended',()=>{
resetLyrics();
statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata',()=>{
statusDisplay.textContent = '音频已加载，点击播放开始';
audioPlayer.play().then(()=>{
    window.isPlaying = true;
    statusDisplay.textContent = '音乐加载中...';
    startSparkleLoop();
}).catch(()=>{
    statusDisplay.textContent = '点击图标开始播放';
});
});
audioPlayer.addEventListener('error',()=>{
statusDisplay.textContent = '音频加载失败';
});
function loadScript(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
loadScript("https://638183.freep.cn/638183/svgdr/svgdr.min.js", function() {
(function tzRun() {
    var dr = _dr(msvg);
    dr.path('M0 0 L-50 -200Q0 -150,50 -100 L0 0', 'none', '#fff', 3).addTo(g1).rotates(6);
    dr.circle(0, 0, 12, 'pink');
    function setProperties() {
      const paths = msvg.querySelectorAll('path');
      paths.forEach((path, idx) => {
            path.style.cssText += `
                --len: ${path.getTotalLength()};
                --delay: ${idx * 2}s;
            `;
      });
      paths.onanimationend = () => {
            g1.classList.add('rotate');
      };
    }
    setProperties();
})();
});
let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
    fullscreen.innerText = '退出全屏';
    papa.requestFullscreen();
}else{
    fullscreen.innerText = '全屏欣赏';
    document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.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(); })
);
msvg.onanimationiteration = () => {
msvg.style.setProperty('filter', `hue-rotate(${60 + Math.random() * 300}deg)`);
};

(function() {letmState = () => papa.style.setProperty('--state', audioPlayer.paused ? 'paused' : 'running');
audioPlayer.addEventListener('playing',mState,false);
audioPlayer.addEventListener('pause',mState,false);
})();

</script>

liumang 发表于 2026-6-13 01:03

欣赏亚纶老师漂亮的制作{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-6-13 01:04

看看就这么简单一个帖，看看代码有这么多，制作辛苦了

liumang 发表于 2026-6-13 01:05

感谢亚纶老师分享{:5_146:}{:5_142:}{:5_146:}

旋风 发表于 2026-6-17 10:38

美女妩媚 哈哈漂亮的制作{:5_150:}{:5_150:}{:5_150:}

查看完整版本: 蓝莲花 - 卡兰迪【雷鬼版】