放下 - 印良法师 - 动画音画 - 花潮论坛

杨帆发表于 2026-3-31 14:08

放下 - 印良法师

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放下 - 印良法师</title>
</head>
<body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Wang+Xi+Zhi&family=Zhao+Meng+Fu&family=Ou+Yang+Xun&display=swap");
#papa { margin: 100px 0 30px calc(50% - 781px); width: 1400px; height: 780px; box-shadow: 2px 2px 8px #000; perspective:800px; background:url('https://pic.imgdb.cn/item/66cdbb83d9c307b7e91a1eb0.jpg') no-repeat center/cover,linear-gradient(30deg,rgba(55,0,0,.8),rgba(55,0,0,.8) 20%,transparent 25%,transparent 80%,rgba(55,0,0,.8) 95%,rgba(55,0,0,.8) 0),linear-gradient(150deg,rgba(55,0,0,.8),rgba(55,0,0,.8) 5%,transparent 20%,transparent 75%,rgba(55,0,0,.8) 95%,rgba(55,0,0,.8) 0),#222 ; background-blend-mode: difference; overflow: hidden; position: relative; z-index: 1; --bg1:url("//cccimg.com/view.php/2f019a9bf3fc827da46b9d109c3c8960.gif") no-repeat center/cover;--bg2:url("https://pic1.imgdb.cn/item/69ca536a9547e6ce4e3f619d.png") no-repeat center/cover; }
#papa::before { position: absolute; content: ''; width: 100%; height: 11.5%; bottom: 1px; background: inherit; filter: url(#turb); mask: linear-gradient(to top, red 20%,transparent 80%,transparent); -webkit-mask: linear-gradient(to top, red 20%,transparent 80%,transparent); }
#vid { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; mix-blend-mode: screen; opacity: 0.9; object-fit: cover; }
#msvg { position: absolute; bottom: 10px; left: 10px; width: 200px; height:200px; cursor: pointer; pointer-events: auto; border-radius: 50%; z-index:18; transform-style: preserve-3d;transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg);transition: transform 0.3s ease;animation: starfish-rotate 3s linear infinite var(--state);transform-origin: center center 20px; }
@keyframes starfish-rotate {to {transform: rotateX(-15deg) rotateY(-15deg) rotateZ(360deg);}}
#msvg:hover {filter: drop-shadow(0 0 80px Gold);stroke-dasharray: 4; stroke-dashoffset: 0; transition: 1s; animation: flash 6s linear infinite var(--state); }
@keyframes flash { to { stroke-dashoffset: 160; } }
.myfilter {position: absolute;width: 0;height: 0;}
#fullscreen{ position:absolute;bottom:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor: pointer;pointer-events: auto;opacity: 0;z-index:15;}
#fullscreen:hover{font-style:italic;}
#papa:hover #fullscreen {opacity: 0.9; }
.lrcShow { position: absolute; bottom: 60px; left:calc(50% ); transform:translateX(-50%); text-align: center; color: transparent; filter: drop-shadow(0px 0px 6px #FFF000) drop-shadow(0px 0px 6px #FF0000) drop-shadow(0px 0px 6px #00FFFF); letter-spacing: 2px; --aniName: bgMove1; --durTime: 1ms; --aniPlayState: running; font: 华文楷体, sans-serif; font: bold 3rem/1.5 "Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";color: rgba(144,238,144, 0.7);filter: brightness(1.4);white-space:pre; z-index: 20; }
.lrcShow::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; left: 0; top: 0; color: transparent; background: var(--bg1); -webkit-background-clip: text; filter: drop-shadow(#000000 1px 0 0) drop-shadow(#000000 0 1px 0) drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0) hue-rotate(0deg) contrast(120%) brightness(200%); overflow: hidden; white-space: nowrap; animation: var(--aniName) var(--durTime) linear forwards; animation-play-state: var(--aniPlayState); }
@keyframes bgMove1 { from { width: 0%; } to { width: 100%; } }
@keyframes bgMove0 { from { width: 0%; } to { width: 100%; } }
#mplayer{position:absolute;text-align:center;top:95%;transform:translate(-50%);left:50%;z-index:60;color:#FF1493;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:600px;height:2px;accent-color:darkgreen;outline:none;cursor:pointer;}
</style>
<div id="papa">
<span id="fullscreen">全屏欣赏</span>
<div id="mplayer" data-tt="00:00 00:00">
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"/></div>
<svg class="myfilter">
<filter id="turb">
<feTurbulence id="feturbulence" type="fractalNoise" numoctaves="3" seed="2" baseFrequency="0.01 0.1"></feTurbulence>
<feDisplacementMap xchannelselector="G" ychannelselector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
</svg>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/25/5b572bcae223c.mp4" autoplay loop preload="auto" playsinline muted></video>
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31544230" autoplay loop preload="auto" playsinline></audio>
<svg id="msvg" width="400" height="400" viewBox="-200 -200 400 400"> <title id="svg-title">播放</title></svg>
<div class="lrcShow" data-lrc=''></div>
</div>
<script>
const lrcShow = document.querySelector('.lrcShow');
const lrcText = `
放下 - 印良法师
词：释迦印良
曲：释迦印良
爱过了恨过了放下吧

有过了痛过了看破吧

虔诚的顶礼啊佛菩萨

今皈依三宝啊

清静啊随缘啊现莲华

了脱啊自在啊菩提妙法

入空门着袈裟摩诃萨

晨钟啊暮鼓啊
大慈啊大悲啊观音菩萨

伴青灯古佛啊

大慈啊大悲啊观世音菩萨

伴青灯古佛啊

爱过了恨过了放下吧

有过了痛过了看破吧

虔诚的顶礼啊佛菩萨

今皈依三宝啊

清静啊随缘啊现莲华

了脱啊自在啊菩提妙法

入空门着袈裟摩诃萨

晨钟啊暮鼓啊

大慈啊大悲啊观音菩萨

伴青灯古佛啊

大慈啊大悲啊观世音菩萨
伴青灯古佛啊

大慈啊大悲啊观音菩萨

伴青灯古佛啊

大慈啊大悲啊观世音菩萨

伴青灯古佛啊
`;
let frames = 0;
const rad = Math.PI / 180;
let animId = null;
function fewave() {
frames += 0.5;
let bfx = 0.01 + 0.002 * Math.cos(frames * rad);
let bfy = 0.1 + 0.02 * Math.sin(frames * rad);
feturbulence.setAttribute('baseFrequency', bfx + ' ' + bfy);
animId = requestAnimationFrame(fewave);
}
function startWave() {
if (!animId) {
fewave();
}
}
function stopWave() {
cancelAnimationFrame(animId);
animId = null;
}
function mState() {
const isPlaying = !aud.paused;
papa.style.setProperty('--state', isPlaying ? 'running' : 'paused');
document.getElementById("svg-title").textContent = isPlaying ? '暂停' : '播放';
const bg1 = getComputedStyle(papa).getPropertyValue('--bg1');
const bg2 = getComputedStyle(papa).getPropertyValue('--bg2');
papa.style.setProperty('--bg1', isPlaying ? bg1 : bg2);
isPlaying ? vid.play() : vid.pause();
isPlaying ? startWave() : stopWave();
}
msvg.onclick = () => {
aud.paused ? aud.play() : aud.pause();
};
aud.onplaying = aud.onpause = aud.oncanplay = mState;
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
function createPlayer() {
const papa = document.getElementById('papa');
};
const audio = document.getElementById('aud');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
var mseek = false;
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;
}
audio.addEventListener('loadedmetadata', () => {
mplayer.dataset.tt = toMin(0) + ' ' + toMin(audio.duration);
});
audio.addEventListener('timeupdate', () => {
if(!audio.duration) return;
if(!mseek) mprog.value = (audio.currentTime / audio.duration) * 100;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => {
if(!audio.duration) return;
audio.currentTime = (mprog.value / 100) * audio.duration;
lrcPlayer.idx = 0;
for(let line of lrcPlayer.gclines){
line.innerHTML = "\u3000";
}
};
mprog.oninput = () => {
if(!audio.duration) return;
let currentTime = (mprog.value / 100) * audio.duration;
mplayer.dataset.tt = toMin(currentTime) + ' ' + toMin(audio.duration);
lrcPlayer.idx = 0;
for(let line of lrcPlayer.gclines){
line.innerHTML = "\u3000";
}
};
class LrcPlayerY {
constructor(opts) {
   this.lrcShowObj = document.querySelector('.lrcShow');
   this.lrcVec = this.handleLrc(opts.lrcTxt);
   this.mObj = document.getElementById('aud');
   this.idx = 0;
   this.setupListeners();
}
handleLrc(lyricTxt) {
   const lines = lyricTxt.trim().split(/\r|\n|\r\n/);
   const lrcs = [];

   for (const line of lines) {
         const timeTags = line.match(/\[\d{1,2}:\d{2}(?:\.\d{1,3})?\]/g);
         if (timeTags) {
            const text = line.replace(/\[.+?\]/g, '').trim();
            timeTags.forEach(tag => {
               const [, minutes, seconds] = tag.match(/\[(\d+):(\d+(?:\.\d+)?)\]/);
               const time = parseFloat(minutes) * 60 + parseFloat(seconds);
               lrcs.push({ time, text });
            });
         }
   }
   return lrcs.sort((a, b) => a.time - b.time);
}
showLrc(duration) {
   this.lrcShowObj.style.setProperty('--aniPlayState', 'paused');
   this.lrcShowObj.style.setProperty('--durTime', '0ms');
   this.lrcShowObj.textContent = this.lrcVec.text;
   this.lrcShowObj.dataset.lrc = this.lrcVec.text;
   void this.lrcShowObj.offsetWidth;
   this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
   this.lrcShowObj.style.setProperty('--durTime', `${duration}ms`);
   this.lrcShowObj.style.setProperty('--aniPlayState', this.mObj.paused ? 'paused' : 'running');
}
setupListeners() {
   const updateLyrics = () => {
const currentTime = this.mObj.currentTime;
if (this.idx >= this.lrcVec.length || currentTime < this.lrcVec.time) {
this.idx = 0;
}
while (this.idx < this.lrcVec.length - 1 &&
      currentTime >= this.lrcVec.time) {
this.idx++;
}
if (currentTime >= this.lrcVec.time) {
const nextTime = this.idx < this.lrcVec.length - 1
   ? this.lrcVec.time
   : this.mObj.duration;
const displayTime = Math.max((nextTime - this.lrcVec.time) * 1000, 100);
this.showLrc(displayTime);
}
};
   this.mObj.addEventListener('timeupdate', updateLyrics.bind(this));
   this.mObj.addEventListener('play', () => {
         this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
   });
   this.mObj.addEventListener('pause', () => {
         this.lrcShowObj.style.setProperty('--aniPlayState', 'paused');
   });
   this.mObj.addEventListener('ended', () => {
         this.idx = 0;
   });
}
}
window.onload = function() {
createPlayer();
new LrcPlayerY({
   lrcTxt: lrcText
});
};
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
msvg.onanimationiteration = () => msvg.style.setProperty('filter', `hue-rotate(${0 + Math.random() * 270}deg)`);
</script>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 1}, [['yellow',0],['orange',0.5],['gold',1]]);
   dr.polygon('0 0,-25 -120,0 -90,25 -120,0 0', 'none', 'url(#grd)', 4).rotates(10);
   dr.circle(0, 0, 125, 'none', 'url(#grd)', 4);
   dr.circle(0, 0, 15, '#FF1493', 'url(#grd)', 1);
</script>
</body>
</html>

小文发表于 2026-3-31 15:11

好听！欣赏！{:4_187:}

也曾年轻 发表于 2026-3-31 15:21

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201703%2F07%2F20170307155335_E5TP2.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1777533642&t=2dfb19dbf75d12b361837c0373dbbf35

红影发表于 2026-3-31 15:30

清净自在，欣赏杨帆好制作{:4_187:}

霜染枫丹 发表于 2026-3-31 16:09

很静心的歌曲，欣赏扬帆佳作，下午好！{:4_204:}{:4_190:}

梦油发表于 2026-3-31 16:58

字幕设计真漂亮。

樵歌发表于 2026-3-31 20:08

音画非常佛系禅机。欣赏扬帆佳作。

杨帆发表于 2026-3-31 21:59

小文发表于 2026-3-31 15:11
好听！欣赏！

谢谢小文鼓励，祝安康开心{:4_176:}

杨帆发表于 2026-3-31 22:00

也曾年轻发表于 2026-3-31 15:21

谢谢老师鼓励，祝安康开心{:4_176:}

杨帆发表于 2026-3-31 22:00

红影发表于 2026-3-31 15:30
清净自在，欣赏杨帆好制作

谢谢影子鼓励，祝安康开心{:4_204:}

杨帆发表于 2026-3-31 22:01

霜染枫丹发表于 2026-3-31 16:09
很静心的歌曲，欣赏扬帆佳作，下午好！

谢谢老师鼓励，祝安康开心{:4_180:}

杨帆发表于 2026-3-31 22:01

梦油发表于 2026-3-31 16:58
字幕设计真漂亮。

谢谢梦兄鼓励，祝安康开心{:4_176:}

杨帆发表于 2026-3-31 22:02

樵歌发表于 2026-3-31 20:08
音画非常佛系禅机。欣赏扬帆佳作。

谢谢樵歌鼓励，祝安康开心{:4_176:}

梦油发表于 2026-4-1 11:09

杨帆发表于 2026-3-31 22:01
谢谢梦兄鼓励，祝安康开心

杨帆朋友别客气。

红影发表于 2026-4-1 22:52

杨帆发表于 2026-3-31 22:00
谢谢影子鼓励，祝安康开心

谢谢，问好杨帆{:4_187:}

页: [1]

花潮论坛's Archiver

放下 - 印良法师