|
|

楼主 |
发表于 2024-6-29 18:30
|
显示全部楼层
本帖最后由 马黑黑 于 2024-6-29 20:41 编辑
帖子代码- <style>
- #papa { --width: 1000px; margin: 20px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 562px; background: url('https://638183.freep.cn/638183/t24/3/ihxlsi.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
- #papa::before { position: absolute; content: url('https://638183.freep.cn/638183/small/hf.webp'); mix-blend-mode: lighten; filter: blur(1px); }
- #txtbox { position: absolute; left: 20px; top: 20px; width: 300px; min-height: 60px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
- #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 24px/26px sans-serif; color: cyan; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
- #player { position: absolute; width: 120px; right: 60px; bottom: 100px; cursor: pointer; animation: rot 6s linear infinite; }
- #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; }
- @keyframes move { to { transform: translate(0); } }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="papa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1467202239" autoplay loop></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/67/5b483eab6f0a1.mp4" muted autoplay loop></video>
- <div id="txtbox"></div>
- <img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title"播放/暂停" />
- </div>
- <script>
- var txtAr = [
- `<span class="tMid"><strong>长相思</strong>(其一)</span><br><br>\n长相思,在长安。\n络纬秋啼金井阑,\n微霜凄凄簟色寒。\n孤灯不明思欲绝,\n卷帷望月空长叹。\n美人如花隔云端。\n上有青冥之高天,\n下有渌水之波澜。\n天长路远魂飞苦,\n梦魂不到关山难。\n长相思,摧心肝。\n<span class="tRight">——[唐]李白</span>`,
- `<span class="tMid"><strong>长相思</strong>(其二)</span><br><br>\n日色欲尽花含烟,\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[curIdx];
- 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[0].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,...[player]].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[0].style.animationName = 'move';
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
樵歌
| + 50 |
+ 100 |
+ 50 |
很给力! |
查看全部评分
|