论坛 › 欢乐水吧 › 再试马老师的烛影文字代码｛【梦江南】

梦江南 发表于 2024-6-21 10:34

再试马老师的烛影文字代码｛【梦江南】

本帖最后由 梦江南 于 2024-6-21 14:56 编辑 <br /><br /><style>
      #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/6674db9bd9c307b7e920475d.gif') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative; }
      #tz::before { content: attr(data-lrc); position: absolute; bottom: 10px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
      #player { left: calc(50% - 50px); bottom: 380px; width: 100px; height: 100px; filter: drop-shadow(0 0 40px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
      #vid { position: absolute; top: 0; width: 160px; height: 260px; clip-path: circle(60%); object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; }
      #player:hover { width: 120px; height: 120px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
      c-c { position: absolute; width: 80%; height: 80%; border: thick inset plum; border-radius: 100% 20%; opacity: .75; }
      @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz" data-lrc="梦江南">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1446888959" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/2916847/00/17/67/5ecc844c234cf.mp4" autoplay loop muted disablePictureInPicture></video>
      <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 10;
Array.from({length: total}).forEach((c,k) => {
      c = document.createElement('c-c');
      c.style.cssText += `
                transform: rotate(${360 / total * k}deg);
                border-color: #${Math.random().toString(16).substring(2,8)};
      `;
      player.appendChild(c);
});
var getAr = (text) => {
      var ar = text.trim().split('\n');
      ar.sort();
      var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
      ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
      });
};
var mState = () => {
      tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
      if(curkey > lrcAr.length - 1) return;
      if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
      }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = ` 作词 : 陈小奇\n 作曲 : 李海鹰\n草青青 水蓝蓝\n哦 白云深处是故乡\n故乡在江南\n雨茫茫 桥弯弯\n哦 白帆片片是梦乡\n梦乡在江南\n不知今宵是何时的云烟\n也不知今夕是何夕的睡莲\n只愿能化作唐宋诗篇\n长眠在你身边\n雨茫茫 桥弯弯\n雨茫茫 桥弯弯\n哦 白帆片片是梦乡\n梦乡在江南\n不知今宵是何时的云烟\n也不知今夕是何夕的睡莲\n只愿能化作唐宋诗篇\n长眠在你身边\n只愿能化作唐宋诗篇\n长眠在你身边\n制作人：何忠 廖志茂\n监制：廖志茂\n混音：李贵\n版权所有：广州声扬文化传播有限公司`;
getAr(lrc);
</script>

红影 发表于 2024-6-21 10:44

漂亮的制作，底图字体以及下方的半透明条幅都很美，还有右上方飘落的花瓣。
欣赏梦江南好帖{:4_199:}

红影 发表于 2024-6-21 10:45

歌词的文字调得也太小了点，感觉还可以再大点{:4_173:}

红影 发表于 2024-6-21 10:45

画面很有江南风情{:4_187:}

梦江南 发表于 2024-6-21 11:22

红影 发表于 2024-6-21 10:45
歌词的文字调得也太小了点，感觉还可以再大点

回影子，文字没有动过，怎么会变得这么小了呢？我不会改啦。

梦江南 发表于 2024-6-21 11:23

红影 发表于 2024-6-21 10:45
画面很有江南风情

谢谢影子支持。中午好！

梦江南 发表于 2024-6-21 11:25

红影 发表于 2024-6-21 10:44
漂亮的制作，底图字体以及下方的半透明条幅都很美，还有右上方飘落的花瓣。
欣赏梦江南好帖

谢谢影子首席支持鼓励！文字不知怎么改？

起个网名好难 发表于 2024-6-21 11:47

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F19433680%2F61b3747fdc6f4c9b900e34a3fbbf7541.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTk0MzM2ODAvNjFiMzc0N2ZkYzZmNGM5YjkwMGUzNGEzZmJiZjc1NDEuZ2lm%2Fsign%2F57112f71771e83fa92162ba84199fab9.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1721533616&t=ce339867f25ff78e6ff12f5c648ba2a7

梦江南 发表于 2024-6-21 11:50

红影 发表于 2024-6-21 10:45
歌词的文字调得也太小了点，感觉还可以再大点

歌词变大了！

梦江南 发表于 2024-6-21 11:52

起个网名好难 发表于 2024-6-21 11:47


谢谢，老师早点不来帮，急煞了！

起个网名好难 发表于 2024-6-21 12:05

梦江南 发表于 2024-6-21 11:52
谢谢，老师早点不来帮，急煞了！

现在不是好了吗，是代码抄出的毛病吧。

梦江南 发表于 2024-6-21 12:09

起个网名好难 发表于 2024-6-21 12:05
现在不是好了吗，是代码抄出的毛病吧。

测试时好好的，一发上来文字变小了，后来再重新抄一遍，文字变大了。

红影 发表于 2024-6-21 12:15

梦江南 发表于 2024-6-21 11:22
回影子，文字没有动过，怎么会变得这么小了呢？我不会改啦。

看到已经变大了，这样的大小更好看{:4_187:}

起个网名好难 发表于 2024-6-21 12:17

梦江南 发表于 2024-6-21 12:09
测试时好好的，一发上来文字变小了，后来再重新抄一遍，文字变大了。

看过帖子的代码就是字体设置的代码有错，后来再看就是正确的了。

红影 发表于 2024-6-21 12:26

梦江南 发表于 2024-6-21 11:23
谢谢影子支持。中午好！

不客气啊，再赏梦江南好帖{:4_187:}

红影 发表于 2024-6-21 12:27

梦江南 发表于 2024-6-21 11:25
谢谢影子首席支持鼓励！文字不知怎么改？

在伪元素对应文字的那栏里{:4_187:}

梦江南 发表于 2024-6-21 13:40

红影 发表于 2024-6-21 12:15
看到已经变大了，这样的大小更好看

谢谢影子，这就是原来的字体大小。{:4_204:}

梦江南 发表于 2024-6-21 13:42

起个网名好难 发表于 2024-6-21 12:17
看过帖子的代码就是字体设置的代码有错，后来再看就是正确的了。

我在翻译它的文字啊，好知道这是什么了。

梦江南 发表于 2024-6-21 13:44

红影 发表于 2024-6-21 12:27
在伪元素对应文字的那栏里

谢谢影子，继续努力！

起个网名好难 发表于 2024-6-21 16:53

梦江南 发表于 2024-6-21 13:42
我在翻译它的文字啊，好知道这是什么了。
font: normal 32px/60px sans-serif ;
表示字体设置为
normal 正常粗细的字体，
32px/60px 大小32px，行高60px
sans-serif字体名称

查看完整版本: 再试马老师的烛影文字代码｛【梦江南】