红影 发表于 2024-7-4 11:06

一七令（学习黑黑《长相思》代码效果）

<style>
        #papa { --width: 1024px; margin: 20px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 600px; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; overflow: hidden; }
        #txtbox { position: absolute; left: 70px; top: 60px; width: 460px; min-height: 60px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
        #txtbox p { position: relative; margin: 4px 0; padding: 0; text-align: center; font: normal 26px/32px \6977\4F53; color: #fbd78e; txtAr-shadow: 1px 2px 1px #FFD700; animation: 2s forwards; }
        #player { position: absolute; width: 120px; left: 236px; opacity: 0.85; bottom: 20px; cursor: pointer; animation: rot 6s linear infinite; }       
        .vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
        .vid:nth-of-type(1) { width: 110%; left: 0px; opacity: 1; }
        .vid:nth-of-type(2) {   height: 110%; top: -10%; transform: rotateY(180deg); mix-blend-mode: screen; opacity: 0.15; }
        .tMid, .tRight { display: inline-block; width: 100%; }
        .tMid { text-align: center; font-size: 28px; }
        .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=366419" autoplay loop></audio>
        <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e8b439053789b68430378081a0dfba0d_preview.mp4" muted autoplay loop></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/52/6242a5d55c213_10s_big.mp4" autoplay loop muted></video>
        <div id="txtbox"></div>
        <img id="player" alt="" src="https://pic.imgdb.cn/item/668556fdd9c307b7e9a6497c.png" title"播放/暂停" />
</div>

<script>
var txtAr = [
        `<span class="tMid"><strong>一七令</strong>（其一）</span><br><br>\n丝，\n寥落，凄迷。\n愁宵永，怅春归。\n当年旧事，隔岁芳期。\n转眸南浦处，回首绿杨堤。\n怜我且当今日，留香更待何时。\n愿得东风依翠盖，更倾蚁酒伴妍姿。<br>\n<span class="tRight">——萧离若</span>`,
        `<span class="tMid"><strong>一七令</strong>（其二）</span><br><br>\n翠，\n千山，万水。\n驭东风，传芳意。\n雪殒梅瘦，桃明柳媚。\n深浅入时无，绸缪知谁似。\n孤羽泣尽新血，红锦书残旧字。\n玉中瑶树共枝连，衣上彩鸳双带系。<br>\n<span class="tRight">——萧离若</span>`,
        `<span class="tMid"><strong>一七令</strong>（其三）</span><br><br>\n素，\n转眸，凝顾。\n梦萦时，肠断处。\n两鬓催雪，孤筝忘柱。\n峰峦障玉关，山径迷前路。\n相思旧苦新怨，天气才晴又雨。\n客舟莫待载愁归，江水岂能流恨去。<br>\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 vids = papa.querySelectorAll('.vid');
var mState = () => {
        [...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
        vids.forEach(vid => 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>

红影 发表于 2024-7-4 11:08

一七令也是宝塔诗，逐字增加文字并对仗，很有趣的文体。
想着这样宝塔逐行出来也挺有趣，就跟着做了个。谢谢@马黑黑 的代码{:4_187:}

红影 发表于 2024-7-4 11:09

这用了视频直接做底图，感觉没做好，应该找个塔型的背景去映衬可能更有趣点。{:4_173:}
也没时间改了，下午要出去，先这样吧。

梦江南 发表于 2024-7-4 11:30

欣赏影子的精彩音画！{:4_187:}

梦江南 发表于 2024-7-4 11:34

宝塔形的诗词别有韵味，赞！

醉美水芙蓉 发表于 2024-7-4 11:36

马黑黑 发表于 2024-7-4 12:06

@樵歌 用这类模板合适，符合审美需求，最主要的，可以变吃瓜边看诗文{:4_170:}

梦油 发表于 2024-7-4 16:39

逐行出来的诗句，渐渐形成了宝塔，妙哉！

樵歌 发表于 2024-7-4 18:58

又来一块漂亮的模板！{:4_199:}

樵歌 发表于 2024-7-4 18:59

文字与图意绝配。虽然简约，但不简单！

樵歌 发表于 2024-7-4 18:59

这是师妹早年舞会的作品吧{:4_173:}

樵歌 发表于 2024-7-4 19:06

马黑黑 发表于 2024-7-4 12:06
@樵歌 用这类模板合适，符合审美需求，最主要的，可以变吃瓜边看诗文

进去看了，里面是视频，弄不来。
就是小辣椒给做的两模板，直接复制下来再贴，（只改了字，个中没敢动任何代码），再贴上就没音乐了。小辣椒说是音乐链接少了引号，问题是我是原版复制！自己并没改音乐地址！{:4_198:}

绿叶清舟 发表于 2024-7-4 19:53

美女好象害羞了{:4_189:}

马黑黑 发表于 2024-7-4 20:52

樵歌 发表于 2024-7-4 19:06
进去看了，里面是视频，弄不来。
就是小辣椒给做的两模板，直接复制下来再贴，（只改了字，个中没敢动任 ...

做帖前需要烧一只檀香

红影 发表于 2024-7-4 21:26

梦江南 发表于 2024-7-4 11:30
欣赏影子的精彩音画！

多谢梦江南鼓励{:4_187:}

红影 发表于 2024-7-4 21:26

梦江南 发表于 2024-7-4 11:34
宝塔形的诗词别有韵味，赞！

是啊，想起这类词很有特点，就拿来试试了{:4_173:}

红影 发表于 2024-7-4 21:27

醉美水芙蓉 发表于 2024-7-4 11:36
很漂亮的！

多谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2024-7-4 21:27

马黑黑 发表于 2024-7-4 12:06
@樵歌 用这类模板合适，符合审美需求，最主要的，可以变吃瓜边看诗文

这个只是换了个词牌的词，就是你的代码呢{:4_173:}

红影 发表于 2024-7-4 21:28

梦油 发表于 2024-7-4 16:39
逐行出来的诗句，渐渐形成了宝塔，妙哉！

这个词牌格式本来就是这个样子的{:4_173:}

红影 发表于 2024-7-4 21:28

樵歌 发表于 2024-7-4 18:58
又来一块漂亮的模板！

其实师兄也可以做个自己的模版的啊{:4_187:}
页: [1] 2 3 4
查看完整版本: 一七令（学习黑黑《长相思》代码效果）