小辣椒 发表于 2024-7-1 22:08

【节气而歌】立夏 七首 TO：樵哥哥


<style>
        #papa { --width: 1269px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 764px; background: url('https://xlaj.cn/assets/file/zp/20240630174320.gif') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
       
        #txtbox { position: absolute; right: 360px;top: 100px; width: 300px; min-height: 100px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
        #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 24px/30px sans-serif; color: Teal; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
        #player { position: absolute; width: 100px;   left: 80px; bottom: 70px; 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: 400px; border: 0px solid; left:400px; top:510px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '微软雅黑','微软雅黑'; font-size: 24px; color: Teal; 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://file.uhsea.com/2406/bac62f056ef2bbf6fb217c90e6278e203C.mp3" autoplay loop></audio>

        <div id="txtbox"></div>
        <img id="player" alt="" src=" https://xlaj.cn/assets/file/zp/20240630174238.png" title"播放/暂停" />

<div class="wz"><div>残春用尽最后的力气 掀开夏的帷幕 舞台上石榴花热情的追光 盯照出麦的青芒和杏的渴望 在杜鹃的情歌声中 我等待那个穿 戴清风又火辣辣的红唇扑面而来 ---樵歌</div></div>
</div>

</div>

<script>
var txtAr = [
        `<span class="tMid"><strong>【节气而歌】立夏 </strong><br>（其一）</span><br><br>\n谁背叛春天\n谁就悱恻地\n遭受花神的诅咒\n并死于夏的门前\n<span class="tRight">——樵歌</span>`,
`<span class="tMid"><strong>【节气而歌】立夏 </strong><br>（其二）</span><br><br>\n我谴责时间\n从雪花儿到梨花\n从村前村后到武凌源\n只须，一夜风雨\n便尘归尘，土归土\n<span class="tRight">——樵歌</span>`,
`<span class="tMid"><strong>【节气而歌】立夏 </strong><br>（其三）</span><br><br>\n长而今\n牧童成了待业青年\n陶渊明潜入谷底\n李白不下扬州\n杜甫又夜夜失眠\n<span class="tRight">——樵歌</span>`,
`<span class="tMid"><strong>【节气而歌】立夏 </strong><br>（其四）</span><br><br>\n我感谢光阴\n从梅朵到望梅止渴\n我不过打了个盹儿\n那少女已长发及腰\n圆润丰满\n<span class="tRight">——樵歌</span>`,
`<span class="tMid"><strong>【节气而歌】立夏 </strong><br>（其五）</span><br><br>\n母亲们不再藏匿青果\n那开怀的笑声\n越过平野川岗\n在麦浪上闪耀青芒\n<span class="tRight">——樵歌</span>`,
`<span class="tMid"><strong>【节气而歌】立夏 </strong><br>（其六）</span><br><br>\n一个穿戴清风的少女\n行走在荷尖之上\n青涩的脸庞上溢满\n对夏的初恋之光\n<span class="tRight">——樵歌</span>`,
`<span class="tMid"><strong>【节气而歌】立夏 </strong><br>（其七）</span><br><br>\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>

liumang 发表于 2024-7-1 23:06

这个文字写作用太好了，小辣椒是做的模版吗

liumang 发表于 2024-7-1 23:07

这个模版好看也是实用{:5_150:}
页: [1]
查看完整版本: 【节气而歌】立夏 七首 TO：樵哥哥