文字配LRC歌词音乐：《且行且珍惜》
本帖最后由 寒冬残荷 于 2022-9-25 13:28 编辑 <br /><br /><style>.txtBox {margin: auto; width:720px; min-width:700px; min-height:520px; background-image:linear-gradient(#fff 29px, #ed8181db 0); background-size: 30px 30px; font: normal 18px / 30px 楷体; color:#bb3d00; border:30px solid #fff; position: relative;}
.txtBox::before, .txtBox::after {position:absolute; color:#ccc; text-align:right; width:720px; height:30px; font-size:14px; background: #fff; border: 20px;}
.txtBox::before {content: attr(data-1);top:-30px;border-bottom: 2px solid red;}
.txtBox::after {content: attr(data-2);bottom:-30px;border-top:2px solid red;}
</style>
<div style="position:relative; width: 760px; height: auto; min-height:850px; ">
<div class="txtBox" data-1="花潮稿纸" data-2="Copyright © 2022 All Right Reserved">
<span style="font-weight: bold; text-align:center; font-size : 24px "> 【萦儿心语】且行且珍惜</span><br><br> 不知什么时候开始喜欢读白落梅的书，还很疯狂的买下了她所有出版的书籍。那些午后的时光里，那些微雨的季节里，都是捧着她的书渡过。一椅、一书、一曲、一咖啡，就这样，让时光老去。<br> 喜欢白落梅，是因为她的笔下没有风华绝代，只有岁月静好。她的文字那么素净，给人如沐春风的感觉。她的文字，又像一杯清茶，清香淡雅，沁人心脾。因为她的文字，我走近了林徽因，走近了张爱玲；因为他的文字，我接触了唐诗宋词，随即让我有了学填诗词的冲动；因为她的文字，我知道了纳兰容若和仓央嘉措，让我对爱情有了更深的理解。<br> 《爱如禅 你如佛》，又名《恨不相逢未剃时：情僧苏曼殊的红尘游历》，介绍了苏曼殊，一个被世人称作诗僧、画僧、情僧、革命僧的传奇人物。他活了短短35年，或许在别人的眼里，这35年太短，但我觉得他可能已经够了，因为他已经看透了红尘，继续下去只有更痛苦。<br> 书中这样介绍苏曼殊：他是个僧人，披着袈裟，竹杖芒鞋在人间游走，莲台才是他最后的家；他是一个情种，身着西服，风度翩然嬉笑于秦楼楚馆，红颜才是他心灵的归所；他是一个志士，在时代的滚滚洪流下，惊奇风云万张；他是一个伶人，在人生这个色彩纷呈的舞台上，演绎这一场又一场阴晴圆缺的戏。<br> 白落梅说：每个人都是矛盾体，坚强又软弱，乐观又悲情，仁慈又邪恶。是的，回想自己，我想安然，但做不到淡定；我想给大家带来快乐，又时常不经意地伤害别人。其实又何必那么执着，风雨人生，走过之后再去回首，一切都已是寻常。真的不必再去纠结什么，因为有缘才能够相遇，才能让我们在这个红尘里安然相守。<br> 套用时髦的一句话：且行且珍惜。那么就让我们珍惜现在，要知道世间所有相遇都是久别重逢。<br> <br><br>
</div>
<style>
#mplayer {position: absolute; bottom: 10px; left: 250px; width: 240px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, snow, darkgreen); opacity: 1; }
#btnwrap { fill: lightblue; cursor: pointer; }
#btnwrap:hover { fill: lightgreen; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; border-radius: 50%; border: 4px solid lightgreen; opacity: 0.1;}
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 240px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,255,0) 100%, transparent 0); border: 1px solid lightgreen; font: normal 14px/16px sans-serif; color: snow; }
#lrc {position: absolute; bottom: 75px; left: 200px; font: bold 2.1em sans-serif; color: transparent; background: linear-gradient(-90deg, darkgreen, transparent) 0 0 / 200% 200%; filter: drop-shadow(2px 2px 40px #000); background-clip: text; -webkit-background-clip: text; text-stroke: 1px #ff0000; -webkit-text-stroke: 1px #ff0000; }
#dt{ position: absolute; width: 433px; height: 280px; top: -30px; left: 750px; }
#dt1{ position: absolute; width: 400px; height: 231px; top: 420px; left: 250px; }
#dt2{ position: absolute; width: 63px; height: 55px; top: 250px; left: 250px; }
#mpic {position: absolute; left: 0; top: 0; width: 60px;offset-distance: 0;offset-path: path("M0 40 Q500 180, 600 160 T1024 40");animation: move 8s linear infinite;}
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes move { to { offset-distance: 100%;} }
</style>
<div id="lrc">花潮论坛lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mKey = 0, mFlag = true, aud = new Audio();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.src = 'https://music.163.com/song/media/outer/url?id=1826417891.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg,rgba(0,0,0,.45), rgba(0,255,0) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
if(mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = (time) => {
lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
lrc.innerHTML = lrcAr;
mKey += 1;
mFlag = !mFlag;
}
let calcKey = () => {
for(j = 0; j < lrcAr.length; j ++) {
if(aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if(mKey <0) mKey = 0;
if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let mtime = lrcAr - (aud.currentTime - lrcAr);
showLrc(mtime);
}
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
本帖最后由 起个网名好难 于 2022-9-25 11:33 编辑
寒冬残荷 发表于 2022-9-25 10:11
应该是论坛系统对发贴有级别限制。且这个限制与浏览器有关。
似乎摸出点门道了，您看看https://www.huachaowang.com/foru ... 63337&page=1&extra=能不能正常显示。
最根本的改变就是把酷我的mp3换成了网易云音乐的。
光盘没出来换成本站的图片就行了， 这帖没换。
这是我阅读了马老师和萦儿的文章练习发的帖。JS部份不显示，是不是新人不能用JS代码？ 寒冬残荷 发表于 2022-9-24 22:20
这是我阅读了马老师和萦儿的文章练习发的帖。JS部份不显示，是不是新人不能用JS代码？
没有这个规定的 看起来又是个高手，手机发代码帖{:4_199:} 寒冬残荷 发表于 2022-9-24 22:20
这是我阅读了马老师和萦儿的文章练习发的帖。JS部份不显示，是不是新人不能用JS代码？
这个和是否新人没关系呢，估计是代码里有问题吧。欢迎新朋友，愿你在花潮玩得开心{:4_188:}{:4_187:} 这信笺做的很漂亮，萦儿的文字也好看。欣赏寒冬残荷好帖{:4_187:} 领导，我是在电脑上发的帖子呀！而且不能正常显示，感到奇怪，才在手机上看。 奇怪，在手机上JS的代码正常。电脑上则不运行JS代码。。
小辣椒 发表于 2022-9-24 22:26
没有这个规定的
谢谢小辣椒管理员。呵呵，那是我的水平太水！ 红影 发表于 2022-9-24 22:40
这个和是否新人没关系呢，估计是代码里有问题吧。欢迎新朋友，愿你在花潮玩得开心
谢谢红影管理员！可能是代码问题吧？！马老师的代码没有学懂。 醉美水芙蓉 发表于 2022-9-25 06:43
老师做得漂亮！
谢谢芙蓉临贴支持！我刚来，看了马老师的教程帖，就想试帖。不成功，JS的代码不能正常运行。
firefox的效果， 居然挑浏览器
起个网名好难 发表于 2022-9-25 10:03
firefox的效果， 居然挑浏览器
老师，您在电脑上有显示？我的用edge和360两个浏览器都没有显示。 起个网名好难 发表于 2022-9-25 10:03
firefox的效果， 居然挑浏览器
不应该的呀，其他网友发的我能看到呀。 寒冬残荷 发表于 2022-9-25 10:07
老师，您在电脑上有显示？我的用edge和360两个浏览器都没有显示。
我的电脑上edge和chrome都不行， firefox可以，很奇怪。 起个网名好难 发表于 2022-9-25 10:03
firefox的效果， 居然挑浏览器
应该是论坛系统对发贴有级别限制。且这个限制与浏览器有关。 寒冬残荷 发表于 2022-9-25 10:08
不应该的呀，其他网友发的我能看到呀。
这网站对外站的文件不友好（mp3、js 等） 寒冬残荷 发表于 2022-9-25 09:57
谢谢红影管理员！可能是代码问题吧？！马老师的代码没有学懂。
可以先在本地试帖，试成功了再发论坛，基本就没什么问题了{:4_187:}
页:
[1]
2