论坛 › 欢乐水吧 › 夏至：昼最长的一天，思念也最长

也曾年轻 发表于 2026-6-21 09:36

夏至：昼最长的一天，思念也最长

<meta name="referrer" content="never" />
<style>
#oBlk        {
        width:640px;min-height:400px;text-align:center;margin:auto;background-color:hsl(60, 30%, 80%);
        overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px;font-size:20px;box-shadow:4px 4px 10px black;

        #container        {width:640px;400px;text-align:center;
                span       {
                        display:block;margin-bottom:6px;
                        &:nth-of-type(1)        {font-size:1.25em;color:brown;}
                        &:nth-of-type(2)        {font-size:0.8em;color:gray;}
                }
                p        {text-align:left;text-indent:2em;margin:12px;font-family:仿宋;}
        }
}
#ctrlBox        {width:640px;margin:16px auto;text-align:center;font-size:2em;color:skyblue;}
#ctrlBox button {cursor:pointer;}
#selIdx {width:32px;text-align:right;border:thin gray dotted;}
</style>
<div id="oBlk">
        <svg viewBox="0 0 1080 400" id="svgObj">
        <defs>
                <pattern id="hstripe" width="50" height="50" patternUnits="userSpaceOnUse">   
                        <rect x='0' y='0' width='50' height='0' fill="white" >       
                        <animate attributename="height" from='0' to='50' begin="bpic0.begin;bpic1.begin;bpic2.begin;bpic3.begin;" dur='3' fill="freeze"/>
                        </rect>       
                </pattern>
                <mask id="mask8" x="0" y="0" width="1080" height="400" >
                        <rect y="0" x="0" width="1080" height="400" style="fill:url(#hstripe)" />
                </mask>
        </defs>
        <image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkrCuwrXD8frsCccX8icqTMVX2Kg7r4tIE84gdYsnA2gPG3LMWricy66aiajAE4uqictRnibryc8Us3gly4ic3PbLU714YO9cSEyKvVJs/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic0" attributename="opacity" from='0' to='1' begin="0;epic3.end-2" dur='2' fill="freeze"/>
        <animate id="epic0" attributename="opacity" from="1" to="0" begin="bpic0.begin+10" dur='2' fill="freeze"/>
        </image>
        <image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkqQFLe6exGMaIrmGE9Afs3PjE5v8B8QwT65UyaODjpB5icjtfO28Ozqw36h4Z9IuVtl7fnwfIr8gUHqJD7J8J1CuLWVp3ysO364/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic1" attributename="opacity" from='0' to='1' begin="epic0.end-2" dur='2' fill="freeze"/>
        <animate id="epic1" attributename="opacity" from="1" to="0" begin="bpic1.begin+10" dur='2' fill="freeze"/>
        </image>
        <image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkqXWCy0w1Q3AOmiaJuFV0owB4RkNibzdcnVcG8bJgZzfBAibWMRqiajoQNR8WGUb8WP5iasictPSnNMLcrvs441CRibGKjUffGoBia0ejs/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic2" attributename="opacity" from='0' to='1' begin="epic1.end-2" dur='2' fill="freeze"/>
        <animate id="epic2" attributename="opacity" from="1" to="0" begin="bpic2.begin+10" dur='2' fill="freeze"/>
        </image>
        <image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkq2l5dOmmRDXKCS8Cia9WZ0qibnCxb15w7riaLZONTohskuMNZnfDVl36huQ6icwBrRLjnAF0STmVn4vYyjqHLUYRAmvXUNMsIvTjE/640" opacity='0'
       x='0' y="0" width="1080" height="400" mask="url(#mask8)" preserveAspectRatio="none">
        <animate id="bpic3" attributename="opacity" from='0' to='1' begin="epic2.end-2" dur='2' fill="freeze"/>
        <animate id="epic3" attributename="opacity" from="1" to="0" begin="bpic3.begin+10" dur='2' fill="freeze"/>
        </image>
        </svg>
        <div id="container"></div>
</div>
<div id="ctrlBox">
        <button id="backward">⇦&nbsp;上一首</button>&emsp;<input id='selIdx' min='1' value=''/>&emsp;<button id="forward">下一首&nbsp;⇨</button></div>
</div>
<script>
//       夏至，5首绝美诗词：昼最长的一天，思念也最长        https://mhttps://mp.weixin.qq.com/s/KnPnBRePVrogaC8WwQkHng
const tab = `&emsp;&emsp;`;
const poems = [
[`《咏廿四气诗·夏至五月中》`,
`唐·元稹`,
`处处闻蝉响，须知五月中。`,
`龙潜渌水穴，火助太阳宫。`,
`过雨频飞电，行云屡带虹。`,
`蕤宾移去后，二气各西东。`,
`夏至五月里，处处蝉鸣声噪，提醒人们这已是盛夏中点。龙因畏热而深藏于清凉的水穴之中，旺盛的火德更助长了太阳宫中的炎威。骤雨初歇，闪电频掣；行云流转，彩虹时现。等到代表五月的蕤宾律一过，阴阳二气便要分道扬镳——阳渐消而阴始长。`],
[`《夏至》`,
`宋·范成大`,
`李核垂腰祝饐，粽丝系臂扶羸。`,
`节物竞随乡俗，老翁闲伴儿嬉。`,
`夏至这天，腰畔也许还挂着时节里吃的李子（或李核），嘴里随口念着几句祈求肠胃安泰、不噎不滞的祷词；手腕上则照着老规矩，缠着一圈包粽子剥下来的五彩丝线——都说这玩意儿能辟邪祛病，给这把老骨头“扶”点儿精神、添把劲儿。<br>${tab}至于那些吃吃喝喝的节令风物嘛，不过是随着这乡野间的老规矩走上一遭罢了。待规矩走完，我这老头子也就彻底闲下来了，搬把竹椅坐在树荫浓处，眯着眼，慢悠悠地陪着旁边的孩子们瞎嬉闹。`],
[`《夏至》`,
`宋·张耒`,
`长养功已极，大运忽云迁。`,
`人间漫未知，微阴生九原。`,
`杀生忽更柄，寒暑将成年。`,
`崔巍干云树，安得保芳鲜。`,
`几微物所忽，渐进理必然。`,
`韪哉观化子，默坐付忘言。`,
`春夏的“长养”之功至此已到极点，天地的运行便在这一刻悄悄换挡；人间大多还沉醉在昼最长、光最烈的错觉里，却不知极细的阴气已在九原之下蠕动——肃杀将代生长而执柄，寒暑由此结算成年。<br>${tab}你看那些直插云表的巨树，也保不住永远芳鲜不凋；万物最危险的转折，往往藏在最微小的“几微”处，靠渐进而非骤变完成，这是理之必然。因而真正通达之人，只做一个“观化者”：坐着，看着，把话说尽，不如把话忘尽。`],
[`《夏至日作》`,
`清·张问陶`,
`一院晴光热，艰难夏日云。`,
`雨声何处得，诗笔此时焚。`,
`大庇思奇树，长天滞夕曛。`,
`东川旧茅屋，风竹正纷纷。`,
`满院都被灼亮的晴光填满，可那光不是温柔的，是烫的——夏至的白昼最长，却也最熬人。天上的云倒是有的，只是懒散、稀薄，聚不起一场雨来，连云都显得"艰难"二字，闷得人喘不过气。<br>${tab}
雨声在哪里？到哪里才能听得一声？ 四处干得连檐溜都盼不来，燥热把人的心思一并烤干——我这支诗笔啊，此刻简直像是要被烈日一把焚了，写不出一个字来。<br>${tab}
放眼望去，只盼能有哪一棵奇伟巨树，张开浓荫，把天下人从这酷暑里一并庇住——可眼前什么都没有，只剩长天之上，夕阳余辉滞在那儿，迟迟不肯落、不肯散，白昼最长的一天的黄昏，反而拖得最磨人。<br>${tab}
……脑子里忽然就翻到另一个画面：东川——我老家那间旧茅屋旁，风一定正穿过竹林吧？ 飒飒然、纷纷然，枝叶翻动，凉意从记忆深处一层层漫上来。`],
[`《夏至过东市二绝·其二》`,
`宋·洪咨夔`,
`涨落平溪水见沙，绿阴两岸市人家。`,
`晚风来去吹香远，蔌蔌冬青几树花。`,
`溪水涨落之后，河面平亮，沙底可见；两岸绿阴里，依稀便是东市的几户人家。晚风来回地吹，把清芬送到远处；冬青树上细花/碎叶簌簌轻落，一下就把夏至黄昏写活了。`],
];
const synth = window.speechSynthesis
var poemIdx = 0;
var utterance = null;
var timeoutID = null;
selIdx.max = poems.length;
selIdx.title = `选择有效值：1 到 ${poems.length}`;

function recitationPoem(idx, pIdx) {
        if(typeof synth === 'undefined')        {
                backwndow.speechSynthesis
                forward.disabled = false;
                selIdx.disabled = false;
                timeoutID = setTimeout(function(){
                        forward.click();
                }, 30000);
        }
        else        {
                if(pIdx < poems.length - 1)        {
                        utterance = new SpeechSynthesisUtterance(poems);
                        utterance.lang = 'zh-CN'; // 设置语言为中文
                        utterance.rate = 1; // 设置语速
                        utterance.pitch = 1; // 设置音调
                        synth.speak(utterance); // 播放语音
                }

                utterance.onend = () => {
                        if(pIdx < poems.length - 4)        {
                                recitationPoem(idx,++pIdx)
                        }
                        else        {
                                synth.cancel();
                                backward.disabled = false;
                                forward.disabled = false;
                                selIdx.disabled = false;
                                timeoutID = setTimeout(function(){
                                        forward.click();
                                }, 5000);
                        }
                };
        }
}
function showPoem(idx)        {
        if(timeoutID)        clearTimeout(timeoutID);
        selIdx.value = idx + 1;
        while (container.firstChild) {
                container.removeChild(container.firstChild);
        }
        backward.disabled = true;
        forward.disabled = true;
        selIdx.disabled = true;
       
        for(sIdx = 0; sIdx < poems.length - 1; sIdx++)        {
                let sObj = document.createElement('span');
                sObj.innerHTML = poems;
                if(sIdx > 1 ) sObj.style.cssText = `font-size:1.3em;color:red;font-family:楷体;`;       
                //else if(sIdx == poems.length - 2) sObj.style.cssText = 'text-align:left; margin-left:1em;';
                container.appendChild(sObj);
        }
       
        let pObj = document.createElement('p');
        pObj.innerHTML = poems.length - 1];
        container.appendChild(pObj);

        recitationPoem(idx,0);
}
backward.onclick = () =>        {
        poemIdx--; if(poemIdx < 0) poemIdx = poems.length - 1;
        showPoem(poemIdx);
}
forward.onclick = () =>        {
        poemIdx++; poemIdx %= poems.length;
        showPoem(poemIdx);
}
const vMin = parseInt(selIdx.min);
const vMax = parseInt(selIdx.max);
selIdx.onchange = () => {
        if(parseInt(selIdx.value) < vMin)        selIdx.value = vMin;
        if(parseInt(selIdx.value) > vMax)        selIdx.value = vMax;
        poemIdx = parseInt(selIdx.value) - 1;
        showPoem(poemIdx);
}
oBlk.onmouseover = () =>        {
        synth.pause();
        svgObj.pauseAnimations();
}
oBlk.onmouseout = () =>        {
        synth.resume();
        svgObj.unpauseAnimations();
}

showPoem(poemIdx);
</script>

也曾年轻 发表于 2026-6-21 09:41

<p style="font:bold 1.8em 微软雅黑;text-indent:2em; color:darkgray;">
夏至，是太阳一年中最慷慨的一次馈赠——白昼被拉到最长，阳光几乎垂直地倾泻下来，树影缩成脚下小小一团，连蝉鸣都比往日更加卖力。古人说“夏至一阴生”，阳气盛极而微弱的转机已在暗中萌动，所以这一天既是顶峰，也是转折。此后真正的暑热才铺展开来，雷雨会来得更急，梅雨季的潮气把空气拧出水，万物在湿热交蒸中疯长。民间有“冬至饺子夏至面”的老话，一碗凉面下肚，既是应节的仪式，也是与漫长白昼和解的方式——既然热气才刚刚开始，那就慢下来，吃碗面，等一场雨，把盛夏的日子一寸一寸地过下去。
</p>

梦江南 发表于 2026-6-21 10:22

也曾年轻 发表于 2026-6-21 09:41
夏至，是太阳一年中最慷慨的一次馈赠——白昼被拉到最长，阳光几乎垂直地倾泻下来，树影缩成脚下小小一团 ...

对啊，今天是夏至。

梦江南 发表于 2026-6-21 10:33

夏至已至，白昼最长。愿你在最长的白昼里，遇见最美好的自己，收获最热烈的欢喜。

也曾年轻 发表于 2026-6-21 10:40

梦江南 发表于 2026-6-21 10:22
对啊，今天是夏至。

https://q9.itc.cn/q_70/images03/20240621/68e5a0a4a0424b19aed243e8c3934cda.gif

也曾年轻 发表于 2026-6-21 10:40

梦江南 发表于 2026-6-21 10:33
夏至已至，白昼最长。愿你在最长的白昼里，遇见最美好的自己，收获最热烈的欢喜。

上午好！谢谢欣赏支持！

红影 发表于 2026-6-21 13:01

今日夏至，感谢也曾年轻收集的关于夏至的诗词{:4_187:}

也曾年轻 发表于 2026-6-21 14:43

红影 发表于 2026-6-21 13:01
今日夏至，感谢也曾年轻收集的关于夏至的诗词

下午好！ 谢谢欣赏支持！
https://imagepphcloud.thepaper.cn/pph/image/138/516/898.gif

红影 发表于 2026-6-21 20:38

也曾年轻 发表于 2026-6-21 14:43
下午好！ 谢谢欣赏支持！

要开始进入最热的时节了{:4_173:}

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

红影 发表于 2026-6-21 20:38
要开始进入最热的时节了

是啊， 过了端午就该热了。

渡劫开始{:5_117:}

红影 发表于 2026-6-21 21:51

也曾年轻 发表于 2026-6-21 21:23
是啊， 过了端午就该热了。

渡劫开始

还真的跟渡劫似的，天然时真的还是挺可怕的{:4_173:}

杨帆 发表于 2026-6-22 14:18

长知识，祝年轻老师夏至夏安{:4_190:}

霜染枫丹 发表于 2026-6-22 21:21

稀里糊涂的夏至这就过了，逝者如斯夫！

选用的古诗都很经典，读来就感到热烈中不乏清新，很喜欢！！感谢分享，祝夏安~~{:4_204:}{:4_190:}

淡墨疏影 发表于 2026-6-23 00:17

很好的形式，点赞！

雨季工作室 发表于 2026-6-24 16:58

欣赏也曾年轻老师佳作！

查看完整版本: 夏至：昼最长的一天，思念也最长