【节气而歌】立夏 七首 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: 110px; 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> @樵哥
樵哥哥你的文字，我选了七首，非常美的意境，感受夏天来了{:4_173:}
@马黑黑
黑黑作业拉下太多了，这个长相思效果也是很喜欢的
哇，亲爱的做了这么多樵歌的诗句啊，这个太赞了{:4_187:} 画面设计也极漂亮，有小船儿，翩飞的燕子，还有水里的鱼儿和摇动的荷花。
除了诗句，下面还加了滚动字呢。这个做得很用心，@樵歌 收礼开心{:4_187:} 滚动和逐行诗词同时出现，这构思很奇妙。欣赏亲爱的好帖{:4_199:} 红影 发表于 2024-6-30 22:50
哇，亲爱的做了这么多樵歌的诗句啊，这个太赞了
亲爱的，作业拉下太多了，回帖也是许多没有回。。。。。{:4_198:} 樵歌会非常喜欢的 小辣椒 发表于 2024-6-30 22:07
@樵哥
樵哥哥你的文字，我选了七首，非常美的意境，感受夏天来了
这个效果太好啦，简直美得樵哥哥我不要不要的。{:4_179:}{:4_204:} 昨天一早就出门到郊外作客去了，九点过才回来，让礼物冷了一夜，现在赶紧来把它捂热乎{:4_189:} 画面简洁明快，夏天典型的花睡莲和荷花，有碧水渔舟，最主要的是有俺的光辉形像。总之，一切存在都非常契合夏天的特色。{:4_178:}{:4_174:}{:4_182:} 红影 发表于 2024-6-30 22:51
画面设计也极漂亮，有小船儿，翩飞的燕子，还有水里的鱼儿和摇动的荷花。
除了诗句，下面还加了滚动字呢。 ...
嗯嗯，画面风格简洁明快，也契合文字的意境，好喜欢！ 辛苦了辛苦了。{:4_183:} 马黑黑 发表于 2024-6-30 23:12
樵歌会非常喜欢的
非常喜欢。谢谢您老的代码加持！{:4_176:} 这个模版要长期用了，以后作为品牌了， 和小辣椒音画一样，用来吸睛{:4_189:} 樵歌 发表于 2024-7-1 08:16
非常喜欢。谢谢您老的代码加持！
{:4_191:} 樵歌、辣椒珠联璧合、相互辉映，联手奉献好贴——“立夏”。 小辣椒 发表于 2024-6-30 23:12
亲爱的，作业拉下太多了，回帖也是许多没有回。。。。。
没事啊，有空就跟呗，我也拉了很多作业{:4_173:} 樵歌 发表于 2024-7-1 08:13
嗯嗯，画面风格简洁明快，也契合文字的意境，好喜欢！
师兄以后写诗词也可以用代码展示了{:4_187:}
页:
[1]
2