论坛 › 古风雅韵 › 【临江仙】我若如莲（外一首）

朝云暮雨 发表于 2024-7-7 00:03

【临江仙】我若如莲（外一首）

<style>
      #papa { --width: 1000px; margin: 20px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 562px; background: url('https://pic.imgdb.cn/item/6688d17ad9c307b7e98ad2f2.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px         #2F4F4F; user-select: none; z-index: 1; position: relative; }
      #papa::before { position: absolute; content: url(''); mix-blend-mode: lighten; filter: blur(1px); }
      #txtbox{ position: absolute; left: 420px; 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 20px/26px sans-serif; color:Teal; 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>\n（词一）</span><br><br>\n浅对悠悠清夏，\n微醺袅袅闲茶，\n临风倚榭读萤蛙，\n呼船僧客远，\n度去一江霞。\n
谁许三千情梦，\n寓于水上莲花，\n鱼书问讯似呆瓜。\n世间多曲折，\n莫又负奴家。\n <span class="tRight">文字：巫山烟云/代码：马黑黑</span>`,
      `<span class="tMid"><strong>【柳含烟】恰遇藕花卿</strong>\n（词二）</span><br><br>\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>

朝云暮雨 发表于 2024-7-7 00:06

@樵歌 @马黑黑 这个是我昨天，搞鼓了半天，还是没有办法改这字的颜色。和字号，字体，就将就的发了。{:4_182:} 就是为了学套这代码{:4_173:}

朝云暮雨 发表于 2024-7-7 00:20

【临江仙】我若如莲（词一）
文字丨巫山烟云

浅对悠悠清夏，微醺袅袅闲茶，临风倚榭读萤蛙，呼船僧客远，度去一江霞。
谁许三千情梦，寓于水上莲花，鱼书问讯似呆瓜。世间多曲折，莫又负奴家。

【柳含烟】恰遇藕花卿（词二）
文字丨巫山烟云
杨风软，草芽青。石径苔痕湿滑，竹云影密扫凉亭，闻泉声。
去处时惊鸥几只，节令佢形如昔，回身恰遇藕花卿，笑相迎。

马黑黑 发表于 2024-7-7 07:29

朝云暮雨 发表于 2024-7-7 00:06
@樵歌 @马黑黑 这个是我昨天，搞鼓了半天，还是没有办法改这字的颜色。和字号，字体，就将就的发了。{:4_18 ...

在 CSS样式制定中：

#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; }

其中：font 是定义文字的，蓝色部分是字体大小，绿色部分是行高设定——

font: normal 24px/26px sans-serif;

color 定义文本颜色（术语称为前景色）——

color: cyan;

马黑黑 发表于 2024-7-7 07:30

创作愉快！

小星世龙 发表于 2024-7-7 08:20

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

小星世龙 发表于 2024-7-7 08:21

早上好，周日快乐！{:4_177:}

红影 发表于 2024-7-7 10:11

图片还是前一个帖子里的吧，最后一句自动折行了，可以把宽度再加大一点{:4_187:}

红影 发表于 2024-7-7 10:16

朝云暮雨 发表于 2024-7-7 00:20
【临江仙】我若如莲（词一）
文字丨巫山烟云



两首漂亮的词句，莲花藕花，都和水有关呢。温柔而浪漫，欣赏云儿好词{:4_187:}

樵歌 发表于 2024-7-7 13:30

朝云暮雨 发表于 2024-7-7 00:06
@樵歌 @马黑黑 这个是我昨天，搞鼓了半天，还是没有办法改这字的颜色。和字号，字体，就将就的发了。{:4_18 ...

已经相当不错了，我天天跟着吃瓜皮，到现在抄都抄不好，还得小辣椒来保驾护航呢{:4_189:}

樵歌 发表于 2024-7-7 13:32

朝云暮雨 发表于 2024-7-7 00:06
@樵歌 @马黑黑 这个是我昨天，搞鼓了半天，还是没有办法改这字的颜色。和字号，字体，就将就的发了。{:4_18 ...

觉得这个颜色在花潮比较清晰的。后面马大师在与此地板楼有指导，可以去试一下

樵歌 发表于 2024-7-7 13:37

马黑黑 发表于 2024-7-7 07:29
在 CSS样式制定中：

#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 24px ...

{:4_176:}

朝云暮雨 发表于 2024-7-7 13:40

马黑黑 发表于 2024-7-7 07:29
在 CSS样式制定中：

#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 24px ...

谢谢马大师，你这个太好了，你不说我自个儿摸黑的乱套乱敲鼓不知要到啥时候。{:4_182:}

朝云暮雨 发表于 2024-7-7 13:40

马黑黑 发表于 2024-7-7 07:30
创作愉快！

谢谢已经修改好了。{:4_173:}{:4_187:}

朝云暮雨 发表于 2024-7-7 13:41

小星世龙 发表于 2024-7-7 08:20
文辞隽秀，彰显文采，自然流畅，词句入味，文笔洗练，结构精巧，韵味清秀，为您点赞！

谢谢小星光临。都是小情小调的东西{:4_190:}

朝云暮雨 发表于 2024-7-7 13:41

小星世龙 发表于 2024-7-7 08:21
早上好，周日快乐！

周日快乐！

樵歌 发表于 2024-7-7 13:43

临江仙一般用来抒发思古之幽怀的，这来填成闺词，不失婉约缠绵。很冻人。{:4_178:}

樵歌 发表于 2024-7-7 13:44

第二首写景自然流畅，结又融入感情。高明！

朝云暮雨 发表于 2024-7-7 13:46

红影 发表于 2024-7-7 10:11
图片还是前一个帖子里的吧，最后一句自动折行了，可以把宽度再加大一点

我就看了樵歌发的长相思，用他的头像弄的，就特发奇想，也用头像弄了个图 。前天偷摸儿一点闲工乱涂了一下。去黑师那音画里弄了代码。发的时候，花潮的版块上不了图。我也没办法，在忘忧草发了。然后找樵歌给我在这里上了底图。找到图片的网址才发来了。哈哈。另外那帖也是喜欢那文字的特效。顺便向樵歌要了，一起套来看看效果。{:4_173:}

朝云暮雨 发表于 2024-7-7 13:47

红影 发表于 2024-7-7 10:16
两首漂亮的词句，莲花藕花，都和水有关呢。温柔而浪漫，欣赏云儿好词

词也那样吧，就想试代码发的。{:4_182:}

查看完整版本: 【临江仙】我若如莲（外一首）