未知名 发表于 2025-9-23 20:09

【蝶恋花】 四题

<style>
        #papa { --width: 1275px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 713px; background: url('https://cccimg.com/view.php/6010fcb48da7189bde857527a20f2e61.gif') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }       
        #txtbox { position: absolute; right: 180px;top: 100px; width: 700px; min-height: 120px; padding: 10px 20px; box-sizing: border-box; overflow: hidden;writing-mode:vertical-lr; letter-spacing: 5px;}
        #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 26px/36px sans-serif; \9ED1\4F53;color: Black; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
        #player { position: absolute; width: 100px;right: 50%;bottom: 40px; cursor: pointer; animation: rot 6s linear infinite; opacity: 0.65; z-index: 5;}
        #vid { position: absolute; width: 100%; height: 80%; object-fit: cover; mix-blend-mode: screen; opacity: 0.5; pointer-events: none; }
        .tMid, .tRight { display: inline-block; width: 100%; }
        .tMid { text-align: center; }
        .tRight { text-align: right; font-size: 18px; }
.wz { position: relative; --w: 300px; border: 0px solid; left:600px; top:510px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '\9ED1\4F53'; font-size: 22px; color: Black; animation: wz1 52s linear infinite; opacity: .95; }
@keyframes wz1 { from { transform: translateX(100%); } to { transform: translateX(calc(-240% - var(--w))); }}

        @keyframes move { to { transform: translate(0); } }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://wj.zp68.com/qg01/2025/03/韩非子 - 平沙落雁 古琴.mp3" autoplay loop></audio>

        <div id="txtbox"></div>
        <img id="player" alt="" src="https://cccimg.com/view.php/4609b38b6f0f5a23a8e8c9f89df414a3.png " title"播放/暂停" />

<div class="wz"><div>【蝶恋花】 文//未知名-图//小辣椒</div></div>
</div>
</div>
<script>
var txtAr = [
        `<span><strong>其一 月下</strong></span><br><br>\n玉镜盘空轻露薄。 \n桂影横窗, \n帘动疏花落。 \n檐下寒蛩声渐弱, \n薰风暗度香初觉。\n \n客里逢秋愁绪恶。 \n雁过中天, \n难把乡书托。 \n醉里拈花空自乐, \n相思此夜当谁约? \n \n<span class="tRight">—— 未知名 </span>`,
               `<span><strong>其二 桂边</strong></span><br><br>\n金粟缀枝飞蕊雨。\n蓦地金黄,\n香缕萦庭户。\n
鹊语声声啼绿树,\n朝光冉冉添幽趣。\n \n
不羡东风吹姹缕。\n独爱秋芳,\n淡雅消尘虑。\n
月下清辉心暗度,\n繁星谁与凭阑数。\n \n <span class="tRight">—— 未知名 </span>`,
`<span><strong>其三 秋江 </strong></span><br><br>\n秋水寒枫鸣夜橹。\n渔火星星,\n摇乱寒江浦。\n
晓梦晨声来似去,\n落帆羁旅迷烟渚。\n\n
倚思阳栏无定处。\n望断天涯,\n不见归舟路。\n
佳节又逢谁共语?\n泪沾衣袖愁千缕。 \n \n <span class="tRight">—— 未知名 </span>`,
`<span><strong>其四 团圆 </strong></span><br><br>\n柿树垂红霞弄影。\n金桂开时,\n环野芬芳靓。\n
车载空航行气盛,\n天涯漫漫团圆省。\n
欢笑一堂良夜永。\n月上明堂,同吃清香饼。\n
莫叹华年容易另,\n年年今日当同景。 \n \n <span class="tRight">—— 未知名 </span>`,

        ];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;

var addPs = () => {
        var txtstr = txtAr;
        txtbox.innerHTML = '';
        paras.length = 0;
        var ar = txtstr.split(/\n/).filter(item => item !=='');
        ar.forEach((p,k) => {
                var para = document.createElement('p');
                para.innerHTML = p;
                para.style.cssText += `transform: translate(${ww}px);`;
                txtbox.appendChild(para);
                paras.push(para);
        });
        curIdx = (curIdx + 1) % txtAr.length;
        mkAni();
};

var parasReset = () => {
        addPs();
        paras.forEach(p => {
                p.style.animationName = '';
                p.style.transform = 'translate(${ww}px)';
                setTimeout( () => { paras.style.animationName = 'move'; }, 500);
        });
};

var mkAni = () => {
        paras.forEach((p,k) => {
                p.onanimationend = () => {
                        paras[(k+1) % paras.length].style.animationName = 'move';
                        if(k === paras.length - 1) setTimeout( () => parasReset(), 10000);
                };
        });
};

var mState = () => {
        [...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
        aud.paused ?vid.pause() : vid.play();
        player.title = ['暂停', '播放'][+aud.paused];
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();

addPs();
paras.style.animationName = 'move';

</script>

未知名 发表于 2025-9-23 20:10

其一 月下
玉镜盘空轻露薄。桂影横窗,帘动疏花落。
檐下寒蛩声渐弱,薰风暗度香初觉。
客里逢秋愁绪恶。雁过中天,难把乡书托。
醉里拈花空自乐,相思此夜当谁约?
其二 桂边
金粟缀枝飞蕊雨。蓦地金黄,香缕萦庭户。
鹊语声声啼绿树,朝光冉冉添幽趣。
不羡东风吹姹缕。独爱秋芳,淡雅消尘虑。
月下清辉心暗度,繁星谁与凭阑数。
其三 秋江
秋水寒枫鸣夜橹。渔火星星,摇乱寒江浦。
晓梦晨声来似去,落帆羁旅迷烟渚。
倚思阳栏无定处。望断天涯,不见归舟路。
佳节又逢谁共语?泪沾衣袖愁千缕。
其四 团圆
柿树垂红霞弄影。金桂开时,环野芬芳靓。
车载空航行气盛,天涯漫漫团圆省。
欢笑一堂良夜永。月上明堂,同吃清香饼。
莫叹华年容易另,年年今日当同景。

红影 发表于 2025-9-23 21:42

漂亮,这四首词从秋月、秋桂、秋江、秋夜入手,写出了秋日美景以及各种秋日思绪。
欣赏未知名漂亮的四首好词{:4_199:}

清茶煮雪 发表于 2025-9-24 09:59

精彩的特效,文字优美,抒情,点赞佳作,{:4_199:}

清茶煮雪 发表于 2025-9-24 10:00

意境优美,余韵悠长,赏学美诗。问好老师!{:4_180:}

未知名 发表于 2025-9-24 18:40

红影 发表于 2025-9-23 21:42
漂亮,这四首词从秋月、秋桂、秋江、秋夜入手,写出了秋日美景以及各种秋日思绪。
欣赏未知名漂亮的四首好 ...

谢谢红影 美女的鼓励,我写的都是大实话,口水词,上不得台面,谢谢谷粒哦{:4_204:}

未知名 发表于 2025-9-24 18:40

菲儿 发表于 2025-9-24 09:59
精彩的特效,文字优美,抒情,点赞佳作,

画儿确实我喜欢的,字不怎地哈{:4_203:}

未知名 发表于 2025-9-24 18:41

菲儿 发表于 2025-9-24 10:00
意境优美,余韵悠长,赏学美诗。问好老师!

问好菲儿,秋安{:4_190:}

红影 发表于 2025-9-24 22:10

未知名 发表于 2025-9-24 18:40
谢谢红影 美女的鼓励,我写的都是大实话,口水词,上不得台面,谢谢谷粒哦

太谦虚了,一出手就是四首,这很厉害呢{:4_187:}

未知名 发表于 2025-9-25 16:54

红影 发表于 2025-9-24 22:10
太谦虚了,一出手就是四首,这很厉害呢

只要用词不去考究,按照上景下情凑呗。我最怕写第一句了,只要有了第一句,后面顺着思路凑下去。{:4_173:}

小星世龙 发表于 2025-9-25 18:43

文辞隽秀,彰显文采,自然流畅,词句入味,文笔洗练,结构精巧,韵味清秀,为您点赞!

小星世龙 发表于 2025-9-25 18:43

文辞隽秀,彰显文采,自然流畅,词句入味,文笔洗练,结构精巧,韵味清秀,为您点赞!{:4_178:}

小星世龙 发表于 2025-9-25 18:55

晚上好,笔耕快乐!{:4_177:}

红影 发表于 2025-9-25 22:02

未知名 发表于 2025-9-25 16:54
只要用词不去考究,按照上景下情凑呗。我最怕写第一句了,只要有了第一句,后面顺着思路凑下去。{:4_173: ...

呵呵,你是想说立意问题吧,其实立意好了,第一句也就有了呢{:4_173:}

小星世龙 发表于 2025-9-29 09:23

好文采,意境尤美,景情融契,笔法灵动,韵味深长!

小星世龙 发表于 2025-9-29 09:23

好文采,意境尤美,景情融契,笔法灵动,韵味深长!
{:4_178:}

云洛天 发表于 2025-9-29 09:44

四阙蝶恋花,写不尽秋日的美景,首首精彩,意境悠然

未知名 发表于 2025-10-3 07:16

云洛天 发表于 2025-9-29 09:44
四阙蝶恋花,写不尽秋日的美景,首首精彩,意境悠然

谢谢云兄谬赞!问好中秋快乐{:4_176:}

小星世龙 发表于 2025-10-5 09:48

好文采,自然,流畅,新颖,典雅,精彩,悠远,意境尤美,景情互替,韵味浓郁,十分精彩!

小星世龙 发表于 2025-10-5 09:48

好文采,自然,流畅,新颖,典雅,精彩,悠远,意境尤美,景情互替,韵味浓郁,十分精彩!
页: [1]
查看完整版本: 【蝶恋花】 四题