何必西天万里遥（学习黑黑《免我蹉跎苦》代码及流光字）
<style>@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
#mama { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: black url('https://pic.imgdb.cn/item/67420b23d29ded1a8c46a0cf.jpg')no-repeat center/ cover; overflow: hidden; }
#player { width: 100px; height: 100px; opacity: .95;bottom: 10%; right:1%; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(30deg); transition: .7s; }
#prog { bottom: 30px; right: 1%; width: 100px; --bg1: #fcddfd; --bg2: #eb84ea; --color: #fcddfd; }
#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
#lrc { bottom: 30%; right:3%; color: #fcddfd; --bg: linear-gradient(rgba(195,126,236,.25),rgba(195,126,236,.75)); font: bold 2.4em KaiTi; writing-mode:vertical-rl; }
#vid { position: absolute; bottom: -60px;width: 110%; height: calc(100% + 100px);object-fit: cover;-webkit-mask: radial-gradient(red 50%, transparent 70%); pointer-events: none; }
#fsbtn { position: absolute; top: 62%; left: 3%; color: LightSkyBlue; padding: 2px 6px; border: 2px solid LightSkyBlue; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
#tit { position: absolute; width:80px; height:720px; top: 5%;left: 1.5%; font: bold 3.4em LiSu; color: transparent; background-image: linear-gradient(180deg, Pink, Cyan, transparent, SkyBlue, tomato, Pink); background-size: 100px 500px; background-position: 0px 500px; border: 1px solid; writing-mode:vertical-rl; -webkit-background-clip:text; animation: wenzi 2s linear infinite alternate var(--state); }
#lrc::before { width: 100%; height: 20%; }
@keyframes cover1 { from { height: 0; } to { height: 100%; } }
@keyframes cover2{ from { height: 0; } to { height: 100%; } }
@keyframes wenzi { from { background-position: 0px -500px; } to { background-position: 0 0; }}
@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>
<div id="mama" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27552553"></audio>
<video id="vid" src="https://link.hhtjim.com/163/5343092.mp4" autoplayloop muted></video>
<div id="tit">何必西天万里遥</div>
<span id="fsbtn"></span>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<img id="player" class="player" src="https://file.uhsea.com/2411/142fe62aa86ddbeb41fa6fb81c3a06d09V.png" alt="" />
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
</script> 唐长老，此去西天山高水长艰苦跋涉，何不留下来，和美丽的杏花仙子欢乐就在今宵{:4_173:} 原来《西游记》电视剧里那么多的好歌，只知道女儿情和天竺少女，无意中搜到这首。
本来已经做了图图，去搜歌曲时，发现网易云有这首歌的原版视频，于是改弦更张直接用视频做了。
主要昨天和@绿叶清舟 聊起，也想做个流光字，所以就动手试试了{:4_173:} 纵向歌词也能直接加呢，这个css封装真的太好了，想加什么就加什么。
标题字是从黑黑文字仓库里找的。感谢@马黑黑 的代码{:4_187:} 不知道杏花仙子最后是不是也遭孙大圣毒手，不去管了，先来跟唐僧一起欣赏仙子的歌舞就好{:4_173:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 夕阳黄昏 发表于 2024-11-24 11:37
一起重温西游记了{:4_173:}
老版的西游真好，里面的插曲和人物以及歌词都那么好呢。 红影 发表于 2024-11-24 11:59
一起重温西游记了
老版的西游真好，里面的插曲和人物以及歌词都那么好呢。
纵向歌词得益于css设置，封装的代码只管显示。 富有创意，布局精致新颖
谢谢影子的精彩分享
谢谢马老师的经典模版{:4_204:} 红影 发表于 2024-11-24 11:28
唐长老，此去西天山高水长艰苦跋涉，何不留下来，和美丽的杏花仙子欢乐就在今宵
唐僧：下辈子吧，俺现世重任在身，顾不得儿女情长，英雄气不短，见谅见谅！ 师妹真是奇思妙想，用著名的86版西游记中一段视频来做。真的好看好听。{:4_187:} 哈哈，这个好，一面听歌一面欣赏西游记片段{:4_178:} 美女就是有才，技术性全面，还是竖歌词{:4_199:} 影这个播放器太漂亮了 红影 发表于 2024-11-24 11:31
原来《西游记》电视剧里那么多的好歌，只知道女儿情和天竺少女，无意中搜到这首。
本来已经做了图图，去搜 ...
很漂亮啊，这么快就出来了 夕阳黄昏 发表于 2024-11-24 12:09
纵向歌词得益于css设置，封装的代码只管显示。
但我css里设置竖向的歌词，它也认可，直接用出来了呢{:4_173:} 杨帆 发表于 2024-11-24 12:57
富有创意，布局精致新颖
谢谢影子的精彩分享
谢谢杨帆鼓励，好玩的呢，主要试试竖排歌词的做法{:4_173:} 马黑黑 发表于 2024-11-24 12:59
唐僧：下辈子吧，俺现世重任在身，顾不得儿女情长，英雄气不短，见谅见谅！
哈哈，黑黑的说法和唐僧别无二致呢，貌似西游里，唐僧遇到很多美女的诱惑，他最放不下的是女儿国国王吧{:4_173:} 樵歌 发表于 2024-11-24 13:28
师妹真是奇思妙想，用著名的86版西游记中一段视频来做。真的好看好听。
偶尔遇到这歌，还惊喜地看到视频了，还是很喜欢这段视频呢，杏花仙的唱跳还是很美的{:4_204:}