般若波罗蜜多心经

杨帆发表于 2026-1-21 19:21

本帖最后由杨帆于 2026-1-27 16:02 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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");
.artBox { background:#180202 url('https://s3.bmp.ovh/imgs/2026/01/23/4d64b2b85c189b37.jpg') no-repeat center/100% 100%;margin:30px 0;left:calc(50% - 81px);transform:translateX(-50%);width:clamp(600px,90vw,1400px);height: auto; padding:1.5rem; background-color:rgba(255,255,255,0.99); font-size:1rem; color:#333; border:4px ridge #c8a986;position:relative; box-shadow:0 8px 24px rgba(0,0,0,0.1); border-radius:8px; backdrop-filter:blur(4px);overflow: hidden; z-index: 1; user-select:none; user-drag: none; --state:running; }
ruby { position:relative;font-size:clamp(1.8rem,5vw,3.8rem); letter-spacing:clamp(4px,2vw,12px); color:#b92b27; white-space:pre-wrap; font-family:"Ma Shan Zheng","SimHei",cursive; text-shadow:1px 1px 2px rgba(0,0,0,0.1);transition:all 0.5s ease;z-index:8; }
ruby:hover {background-color: #c41e3a;color: #ffffff;}
rt { font-size:0.7em; padding:8px 0; letter-spacing:2px; color:#1a73e8; font-family:"STSong", "STKaiti", "KaiTi","SimSun",serif; }
.pinyin-line { display:block; margin:15px 0; }
.artBox img {margin: 1px auto; width:800px; box-shadow:2px 2px 6px gray; transition:1s; left:0%; z-index:10; position:relative; }
.artBox img:hover { transform:scale(1.8); }
.artBox blockquote.calligraphy { writing-mode:vertical-rl; text-orientation:upright; position: relative;width:90%;height:600px;margin:5rem auto; background:rgba(249,245,238,0.95); font-size:1.4rem; border-top:4px solid #8b4513; padding:2rem 1.5rem; color:#2d2d2d; line-height:2; white-space:normal; font-family:"Zhao Meng Fu","STKaiti","KaiTi",cursive,serif;}
.artBox h2 { color:#8b4513; margin-top:30px;margin-right:30px;font-size:1.8rem; font-family:"Zhao Meng Fu","STKaiti","STKaiti", "KaiTi",cursive,serif; }
.artBox .mid { text-align:center; }
.downshift { margin-top:30px; }
.downshiftt { margin-top:50px; }
.artBox h3 {display: flex; align-items: center; justify-content: center;color: #1a73e8; padding-bottom: 8px; margin-top: -25px; font-size:2.8rem; font-family:"STLiti","STSong","Zhao Meng Fu","STKaiti", "KaiTi",cursive,serif;text-align: justify; }
.artBox blockquote.explanation { position: relative;white-space:pre-wrap;background:rgba(249,245,238,.95);
width: 90%;height:2200px; font-size:1.8rem; margin-top: -25px; padding:2rem 1.5rem; color:#2d2d2d; line-height:2.2;font-family:"Ou+Yang+Xun","STKaiti","KaiTi",cursive,serif;}
#content { position:relative; text-align:center; margin-bottom:-1rem; z-index:5; padding:1.5rem 1rem; width:80%; margin-left:auto; margin-right:auto; height:auto; left:3%; line-height:1.8; }
#an { position:absolute; width:45px; height:45px; left:28.5%; top:2.3%; background:radial-gradient(closest-side,gray,transparent),conic-gradient(red,magenta,blue,aqua,lime,yellow,red); animation:rot 8s linear infinite var(--state); cursor:pointer; border-radius:50%; z-index:10; }
#an:hover { transform:scale(1.2); filter:hue-rotate(180deg); }
@keyframes rot { to { transform:rotate(360deg); } }
#tmsg { position:absolute; z-index: 10; font:normal 18px sans-serif; color:#1a73e8; top:4.5%; right:25.5%; --display:block; display:var(--display); }
#prog { position:absolute; width:38%; height:5px; left:27%; top:4.8%; z-index:8; cursor:pointer; --display:block; display:var(--display); overflow: hidden;background:#666; accent-color:#ADFF2F;z-index: 10; }
#vid { position:absolute; width:52%; height:3.3%; left:24%; top:.8%; object-fit:cover; opacity:.3;z-index: 1; }
.artBox blockquote strong {color: #FF8C00;font-weight: 900;}
.artBox blockquote.calligraphy .downshiftt.small{display: inline-block;font-size:1.1rem;}
</style>
<div class="artBox">
<progress id="prog"></progress>
<div id="tmsg">00:00|00:00</div>
<video id="vid" src="https://upfile.mp3.wf/view.php/7f9f1d52f7c575953b6957576cd5d0b2.mp4" autoplay loop muted></video>
<span id="an"></span>
<div id="content">般若波罗蜜多心经</div><br><br>
<p class="mid"><img src="https://pic1.imgdb.cn/item/696f211eb931ecccdc5afc74.jpg" alt=""></p>
<blockquote class="calligraphy">
<h2>赵孟頫《心经》</h2><strong><br>般若波罗蜜多心经<br><br>观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色，受想行识，亦复如是。舍利子，是诸法空相，不生不灭，不垢不净，不增不减。是故，空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界，乃至无意识界，无无明，亦无无明尽，乃至无老死，亦无老死尽。无苦集灭道，无智亦无得，以无所得故，菩提萨埵，依般若波罗蜜多故，心无挂碍，无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃。三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。故说般若波罗蜜多咒，即说咒曰：<br><span class="downshift">揭谛揭谛，波罗揭谛，</span><br><span class="downshift">波罗僧揭谛，菩提娑婆诃。</span><br><br>般若波罗蜜多心经<br><br><span class="downshiftt small">弟子赵孟頫奉为</span><br><span class="downshiftt small">本师中峰和尚书</span></strong></blockquote>
<br><p class="mid"><h3>《心经》高频经典语句通俗解读</h3><br><br>
<blockquote class="explanation"> 1️⃣ <strong>原文：</strong>观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄｜<strong>通俗解读：</strong>觉悟的菩萨修行深度智慧时，洞察到构成身心的五蕴无永恒实体（空性），因此能超越一切痛苦，是《心经》总纲｜<strong>生活启示：</strong>痛苦多源于对 “我” 的执着，以旁观者视角审视情绪想法，不被捆绑，减轻内心负担<br>
2️&#8419<strong>原文：</strong>色不异空，空不异色，色即是空，空即是色，受想行识，亦复如是｜<strong>通俗解读：</strong>物质与空性无本质区别，物质本质是空性（无常、因缘和合），空性也通过物质显现，此规律适用于感受、思想、行为、意识｜<strong>生活启示：</strong>不执着转瞬即逝的名利情感物质，珍惜当下不执念，拥有不狂喜，失去不悲恸<br>
3️&#8419<strong>原文：</strong>舍利子，是诸法空相，不生不灭，不垢不净，不增不减｜<strong>通俗解读：</strong>一切事物的本质是空相，超越 “生灭、垢净、增减” 的二元对立｜<strong>生活启示：</strong>不被好坏、美丑、得失的判断绑架，以平等心接纳生命的所有状态<br>
4️&#8419<strong>原文：</strong>无眼耳鼻舌身意，无色声香味触法｜<strong>通俗解读：</strong>无独立存在的感官与感知对象，我们感知的世界是六根、六尘、意识相互作用的结果｜<strong>生活启示：</strong>减少对感官欲望的过度执着，培养不被外在表象左右的觉察力<br>
5️&#8419<strong>原文：</strong>心无挂碍，无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃｜<strong>通俗解读：</strong>心中无执着牵绊，便不会恐惧焦虑，进而远离错误认知与虚妄执念，抵达终极觉悟的安宁境界｜<strong>生活启示：</strong>放下对控制、完美、被认可的执念，接受生活的不确定性，专注过程而非结果<br>
6️&#8419<strong>原文：</strong>以无所得故，菩提萨埵，依般若波罗蜜多故，心无挂碍｜<strong>通俗解读：</strong>菩萨因不执着于 “所得” 的心态，依靠般若智慧，达到心无挂碍的境界，越执着越容易被束缚｜<strong>生活启示：</strong>放下 “必须拥有什么才幸福” 的思维，做事尽力而为顺其自然，学会分享与放下<br>
7️&#8419<strong>原文：</strong>故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚｜<strong>通俗解读：</strong>般若智慧是最具力量、能照亮心灵的至高智慧，可彻底消除痛苦，真实不虚｜<strong>生活启示：</strong>困境中用智慧看清本质，代替情绪化反应，明白智慧能转变痛苦心态而非消除困境<br>
8️&#8419<strong>原文：</strong>揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃｜<strong>通俗解读：</strong>梵文音译的行动召唤，意为 “去吧！去吧！到觉悟的彼岸去吧！大众一起去！速速成就觉悟！”｜<strong>生活启示：</strong>智慧需知行合一，在生活中践行，保持精进态度，在日常小事中专注当下</blockquote><br><br>
</div>
<script type="module">
import {html, selfPy} from 'https://638183.freep.cn/638183/web/py/pypro.js';
const addPinyin=()=>{
const contentElem=document.getElementById('content');
const originalText=contentElem.textContent.trim();
selfPy({般: 'bō',若:'rě'});
contentElem.innerHTML=html(originalText);
};
if(document.readyState==='loading'){
document.addEventListener('DOMContentLoaded',addPinyin);
}else{
addPinyin();
}
</script>
<audio id="aud" src="https://www.joy127.com/url/142534.mp3" autoplay loop></audio>
<script>
const artBox = document.querySelector('.artBox');
const an = document.getElementById('an');
const aud = document.getElementById('aud');
const vid = document.getElementById('vid');
const prog = document.getElementById('prog');
const tmsg = document.getElementById('tmsg');
(function () {
let mState = () => {
an.style.setProperty('--state', aud.paused ? 'paused' : 'running');
an.title = aud.paused ? '播放' : '暂停';
aud.paused ? vid.pause() : vid.play();
artBox.style.setProperty('--state',aud.paused?'running':'paused');
prog.style.setProperty('--display',aud.paused?'none':'inline');
tmsg.style.setProperty('--display',aud.paused?'none':'inline');
};
aud.addEventListener('play', mState);
aud.addEventListener('pause', mState);
an.onclick = () => {
aud.paused ? aud.play() : aud.pause();
};
an.title = '暂停';
})();
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=val%60;
if(min<10)min='0'+min;
if(sec<10)sec='0'+sec;
return min+':'+sec;
}
</script>
</body>
</html>

杨帆发表于 2026-1-21 19:26

素材来自小文老师分享作品，在此表示感谢~{:4_190:}

小文发表于 2026-1-21 20:15

杨帆发表于 2026-1-21 19:26
素材来自小文老师分享作品，在此表示感谢~

兄客气了，问好！直呼小文就好，谢谢！{:4_187:}{:4_191:}

杨帆发表于 2026-1-21 20:21

小文发表于 2026-1-21 20:15
兄客气了，问好！直呼小文就好，谢谢！

好的，小文晚上好{:4_190:}

小文发表于 2026-1-21 20:23

杨帆发表于 2026-1-21 20:21
好的，小文晚上好

嗯，晚上好！杨兄！{:4_187:}{:4_191:}

也曾年轻 发表于 2026-1-21 20:26

显示似乎有些缺憾，直接贴代码不好吗。

红影发表于 2026-1-21 20:52

这个鼠标触动还能放大图片呢，这个做成帖子了，还有相配的歌曲呢。
欣赏杨帆好帖{:4_199:}

杨帆发表于 2026-1-21 21:42

也曾年轻发表于 2026-1-21 20:26
显示似乎有些缺憾，直接贴代码不好吗。

刚试了一下发源码，一发帖子就进不去了，也无法编辑或删除

请老师帮助看一下，到底问题在哪儿？谢谢{:4_190:}

杨帆发表于 2026-1-21 21:45

红影发表于 2026-1-21 20:52
这个鼠标触动还能放大图片呢，这个做成帖子了，还有相配的歌曲呢。
欣赏杨帆好帖

谢谢影子鼓励，鼓捣着玩呢，尝试一下复杂文字板式{:4_173:}

小辣椒 发表于 2026-1-21 21:48

杨帆这个播放器也是有问题，点击后进度条也是不见了

也曾年轻 发表于 2026-1-21 22:20

杨帆发表于 2026-1-21 21:42
刚试了一下发源码，一发帖子就进不去了，也无法编辑或删除

请老师帮助看一下，到底问题在哪儿？谢谢{: ...

我也不知道毛病在哪，试着贴看看。

杨帆发表于 2026-1-21 22:36

小辣椒发表于 2026-1-21 21:48
杨帆这个播放器也是有问题，点击后进度条也是不见了

是，预设就是这样{:4_204:}

杨帆发表于 2026-1-21 22:39

也曾年轻发表于 2026-1-21 22:20
我也不知道毛病在哪，试着贴看看。

谢谢老师，有空我再试一试{:4_173:}

也曾年轻 发表于 2026-1-21 22:49

本帖最后由也曾年轻于 2026-1-21 22:52 编辑

杨帆发表于 2026-1-21 22:39
谢谢老师，有空我再试一试
论坛不认那个FU字，直接贴上来它显示乱码不说还把它后面的代码都截断丢弃。

杨帆发表于 2026-1-21 22:53

也曾年轻发表于 2026-1-21 22:49
直接贴上来“睢蓖ú还庾窒允静徽非医竺娴拇虢厝《簟

是，不行就发空间贴吧，只是排版不太如意{:4_172:}

也曾年轻 发表于 2026-1-21 23:00

杨帆发表于 2026-1-21 22:53
是，不行就发空间贴吧，只是排版不太如意

宽度不用那可变的宽度大约就不会混乱吧

红影发表于 2026-1-21 23:05

杨帆发表于 2026-1-21 21:45
谢谢影子鼓励，鼓捣着玩呢，尝试一下复杂文字板式

这制作很漂亮呢{:4_187:}

杨帆发表于 2026-1-21 23:11

也曾年轻发表于 2026-1-21 23:00
宽度不用那可变的宽度大约就不会混乱吧

好的，我尝试一下固定宽度

杨帆发表于 2026-1-21 23:13

红影发表于 2026-1-21 23:05
这制作很漂亮呢

呵呵，谢谢鼓励，有待进一步调试{:4_173:}

也曾年轻 发表于 2026-1-21 23:26

本帖最后由也曾年轻于 2026-1-22 07:53 编辑 <br /><br />

页: [1] 2

花潮论坛's Archiver

般若波罗蜜多心经