加林森 发表于 2021-11-15 19:30
祝福你，幸福的温暖冬天。
谢谢队长， 咋们一起温暖过冬 {:4_179:}
本帖最后由 加林森 于 2022-2-24 20:20 编辑 <br /><br />大猫咪 发表于 2021-11-15 19:31
谢谢队长， 咋们一起温暖过冬
我们这里现在好像不太冷。
<style>
#bigPa { position: relative; left:- 100px; width: 800px; height: 450px; background:#333 url('https://pic.imgdb.cn/item/621774b22ab3f51d918d77cc.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 500px; float: right; column-count:2; color: #eee; font-size: 1em; text-shadow: 1px 1px 1px #111; }
#paDiv { position: relative; left: 10px; top: 10px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="fukuang">
<a href="http://gxblk.byethost11.com/">呼伦贝尔大草原</a>
</div>
<style>
/* 父盒子 */
#wyyBox {
margin: 10px auto;
width:300px;
height: 52px;
text-align: center;
}
/* 播放器 */
#wyyBox iframe {
width: 298px;
height: 52px;
border: none;
/*切割 clip-path: circle(16px at 271px); */
}
</style>
<div id="wyyBox"></div>
<script>
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "music.163.com/outchain/player?type=2&id=1907241231&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
</script>
加林森 发表于 2021-11-15 19:34
我们这里现在好像不太冷。
嗯冬天才刚刚开始，今天冬天估计不好混{:4_189:}
本帖最后由 加林森 于 2022-2-25 11:43 编辑 <br /><br />大猫咪 发表于 2021-11-15 19:35
嗯冬天才刚刚开始，今天冬天估计不好混
有可能
<style type="text/css">
.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; left:10px;top: 0; }
#lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>
<div class="mnBox">
<div class="ctBox">
<p style="text-align:center;"><img alt="550" height="362" src="https://pic.imgdb.cn/item/621841052ab3f51d91ea9ce2.jpg" /><br></p>
<h2 style="padding-bottom: 10px;"> 相约北京(Live)</h2>
<h2 style="text-align:center;">歌手--常石磊、关晓彤</h2>
<pre>
看见小辣椒分享的
歌词同步高亮制作
在这个css边框中测试一下
感觉这个歌词同步高亮效果
加上这个边框特别漂亮
这样分享音乐也是不错
感谢小辣椒又一个精彩分享
我也跟到制作一个，感谢小辣椒及老黑！
感谢老黑的精彩分享
自动播放歌词同步高亮制作
</pre>
<p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >谢谢老黑的精彩分享</marquee></p>
<p style="text-align:center;"><audio id="myplayer" src="http://www.kumeiwp.com/sub/filestores/2022/02/24/0874daa0fa8f8244a629af80e191d78a.mp3" controls="controls" autoplay="autoplay"></audio></p>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<p style="margin: 20px; text-align:center;">加林森2022 02 25</p>
</div>
</div>
<script language="javascript">
var lrcAr = [
["00:00.11",""],
["00:03.11"," 相约北京(Live)"],
["00:10.48"," 歌手：常石磊、关晓彤"],
["00:16.76"," LRC编辑：加林森"],
["00:21.64"," 梦想 开出花我们绽放吧"],
["00:27.07"," 这奇迹闪耀在 华夏的冬岭上"],
["00:33.60"," 飘雪千万里 火树银花"],
["00:39.83"," 这温暖从家乡 飞到远空了"],
["00:46.26"," 天高海也大 我们相约吧"],
["00:53.24"," 这团聚就好像 地球圆圆嗒"],
["00:59.68"," 双手拨云开 世界抱一下"],
["01:04.36"," 我和你的感动 与生俱来的"],
["01:06.75"," 可爱的我 相约可爱的你"],
["01:13.83"," 纯洁的冰雪 怀着童真记趣"],
["01:16.91"," 我的快乐 牵动你的心灵"],
["01:22.56"," 让不舍 一次次相依"],
["01:29.03"," 可爱的我 相约可爱的你"],
["01:35.95"," 激情的约会 点亮爱的出发地"],
["01:42.15"," 雪花燃烧 帅得如此神奇"],
["01:44.73"," 朝阳下 北京会想你 会想你"],
["01:49.31"," 天高海也大 我们相约吧"],
["01:55.45"," 这团聚就好像 地球圆圆嗒"],
["02:02.83"," 双手拨云开 世界抱一下"],
["02:08.91"," 我和你的感动 与生俱来的"],
["02:15.44"," 可爱的我 相约可爱的你"],
["02:24.03"," 纯洁的冰雪 怀着童真记趣"],
["02:48.19"," 我的快乐 牵动你的心灵"],
["02:55.01"," 让不舍 一次次相依"],
["03:01.24"," 可爱的我 相约可爱的你"],
["03:05.87"," 激情的约会 点亮爱的出发地"],
["03:08.22"," 雪花燃烧 帅得如此神奇"],
["03:15.46"," 朝阳下 北京会想你 会想你"],
["03:18.50"," 可爱的我 相约可爱的你"],
["03:24.18"," 纯洁的冰雪 怀着童真记趣"],
["03:30.36"," 我的快乐 牵动你的心灵"],
["03:37.54"," 让不舍 一次次相依"],
["03:43.55"," 可爱的我 相约可爱的你"],
["03:46.38"," 激情的约会 点亮爱的出发地"],
["03:51.02"," 雪花燃烧 帅得如此神奇"],
["03:57.20"," 朝阳下 北京会想你 会想你"],
["04:04.53"," 朝阳下 北京会想你 会想你"],
["04:10.56"," 谢谢欣赏"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "black";
lrcUl.style.top ="-" + (j * 20 - 20) + "px";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "red";
}
}
}
// 播放结束重置歌词样式
myaud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "black";
lrcUl.style.top = 0;
this.play();
}
</script>
加林森 发表于 2021-11-15 19:04
你慢慢熬吧
https://dl4.weshineapp.com/gif/20211008/1abe69b8012ac7a71ee32e852a488f96.gif?f=micro_
加林森 发表于 2021-11-15 16:53
红影下午好。我锻炼回来了。
羡慕队长有时间锻炼，我这段时间都忙得找不到北了，悲催的。
马黑黑 发表于 2021-11-15 21:30
好家伙搞个这么大的上来啊。{:4_170:}
加林森 发表于 2021-11-15 22:06
好家伙搞个这么大的上来啊。
{:4_189:}
红影 发表于 2021-11-15 21:52
羡慕队长有时间锻炼，我这段时间都忙得找不到北了，悲催的。
注意自己的身体啊
马黑黑 发表于 2021-11-15 22:07
太大了吧
加林森 发表于 2021-11-15 22:20
太大了吧
一般大不是特大
马黑黑 发表于 2021-11-15 22:48
一般大不是特大
还不大？吓我啊？