美丽中国
本帖最后由 起个网名好难 于 2024-3-1 18:27 编辑 <br /><br /><style type="text/css">.lrcShow{font:bold 3em sans-serif;position:absolute;bottom:20px;left:20%;color:white;text-shadow:1px 1px 1px #000;letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}.mCtrl{border:2px solid #000000;border-radius:50%;display:inline-block;width:90px;height:90px;margin:0px;position:absolute;bottom:30px;right:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png);background-position:0 0;background-size:100% 100%;}.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
.level1 {
width:200px;overflow:hidden;transform: rotate(120deg);position:absolute;
}
.level2 {
width:200px;overflow:hidden;transform: rotate(-60deg);
}
.level3 {
width:200px;height:346.4px;
background-size:125% auto;
background-repeat:no-repeat;
background-position:50% center;
transform: rotate(-60deg);
}
.row1 {top:-50px;}
.row2 {top:130px;}
.row3 {top:310px;}
.row4 {top:490px;}
.row5 {top:670px;}
.oddcol1 {left:0px;}
.oddcol2 {left:210px;}
.oddcol3 {left:420px;}
.oddcol4 {left:630px;}
.oddcol5 {left:840px;}
.evencol1 {left:105px;}
.evencol2 {left:315px;}
.evencol3 {left:525px;}
.evencol4 {left:735px;}
#mtitle {
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px rgb(0,71,171); background-image:url(https://z3.ax1x.com/2021/07/10/WSvNo4.gif);line-height:180%;
font:bold 4em 华文彩云;
}
#outblk {
width:1038px;position:relative; margin:100px 0px 32px calc(50% - 600px);height:1150px;
background-image: linear-gradient(to right bottom, #dbb 0%, #dbd 40%, #bbd 75%);
padding:16px;
text-align:center;
overflow:hidden;
border-radius:36px;
border:thick pink groove;
}
.mCtrl {
/** 控制光盘显示的缺省设置：
width:90px;height:90px; 光盘大小
bottom:30px;right:30px; 光盘位置
background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png); 光盘图片 **/
background-image:url(data/attachment/forum/202209/24/224500cco531c1941cynbf.png);
width:40px;height:40px;
}
.lrcShow {
/** LRC歌词显示的缺省设置：
font:bold 3em sans-serif; 字体设置
color:white;歌词背景色
bottom:20px;left:20%; 显示位置 **/
font:bold 60px 新宋体; font-size:3.5em;color:yellow;
}
.lrcShow:before {color:darkgreen;}
</style>
<div id="outblk">
<span id="mtitle" title='点击启动播放音乐'>美丽中国</span>
<div style="width:1038px; height:960px;position:relative;overflow:hidden;">
<!-- 1st row -->
<div class='level1 row1 oddcol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRwNj.gif) ;">
</div></div></div>
<div class='level1 row1 oddcol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRdEQ.gif) ;">
</div></div></div>
<div class='level1 row1 oddcol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRUHg.gif) ;">
</div></div></div>
<!-- 2nd row -->
<div class='level1 row2 evencol1'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRNDS.gif) ;">
</div></div></div>
<div class='level1 row2 evencol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRtu8.gif) ;">
</div></div></div>
<div class='level1 row2 evencol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRJjf.gif) ;">
</div></div></div>
<div class='level1 row2 evencol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlRGgP.gif) ;">
</div></div></div>
<!-- 3rd row -->
<div class='level1 row3 oddcol1'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlR83t.gif) ;">
</div></div></div>
<div class='level1 row3 oddcol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/Rli3b8.gif) ;">
</div></div></div>
<div class='level1 row3 oddcol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/Rlia2n.gif) ;">
</div></div></div>
<div class='level1 row3 oddcol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliU8s.gif) ;">
</div></div></div>
<div class='level1 row3 oddcol5'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlR04s.gif);">
</div></div></div>
<!-- 4th row -->
<div class='level1 row4 evencol1'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliNCj.gif) ;">
</div></div></div>
<div class='level1 row4 evencol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliY5Q.gif) ;">
</div></div></div>
<div class='level1 row4 evencol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliJUg.gif) ;">
</div></div></div>
<div class='level1 row4 evencol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliGVS.gif) ;">
</div></div></div>
<!-- 5th row -->
<div class='level1 row5 oddcol2'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/Rli1Df.gif) ;">
</div></div></div>
<div class='level1 row5 oddcol3'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RlilKP.gif) ;">
</div></div></div>
<div class='level1 row5 oddcol4'>
<div class='level2'>
<div class='level3' style="background-image: url(https://z3.ax1x.com/2021/06/25/RliMvt.gif) ;">
</div></div></div>
</div>
<!-- audio id="pSound" src="https://link.hhtjim.com/163/1298528307.mp3" loop style="margin-top:12px;"/ -->
<divclass="lrcShow" data-lrc=''></div>
<divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.showLrcObj=document.getElementById(opts.lrcShowID);this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.getElementsByClassName('lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(lrcs.length==0&&_t!=0){lrcs.push({seconds:0,words:'© cesholl'})}lrcs.push({seconds:_t,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;that.audioCtrl.classList.remove('z360z');this.play()});this.mObj.addEventListener('play',function(){that.audioCtrl.classList.add('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.audioCtrl.classList.remove('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*1000-100)}else{that.showLrc((this.duration-that.lrcVec.seconds)*1000-100)}}}});this.audioCtrl.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>
<script type="text/javascript">
var lrc =`
美丽中国 - 于文华
词：牧冬秀美
曲：林发贺磊
美丽中国
美丽中国
美丽中国
美丽是春雨轻声敲打的新绿
美丽是深秋幸福收获的金黄
美丽是流淌快乐甜蜜的江河
美丽是闪烁璀璨梦想的星光
美丽是山水相依的温暖
美丽是日月辉映的悠长
美丽的山哟美丽的水
江山如画国色天香国色天香
美丽是柔和目光流露的自信
美丽是铁骨脊梁挺起的坚强
美丽是驰骋五洲大洋的远航
美丽是遨游宇宙太空的飞翔
美丽是五谷丰登的欢畅
美丽是家和业兴的向往
美丽的你哟美丽的他
爱的热土我的家乡我的家乡
美丽中国山欢水笑
美丽中国凤舞龙翔
美丽中国源远流长
美丽中国撒满阳光
美丽中国撒满阳光撒满阳光
美丽中国中国
`;
var opts = {
lrcTxt:lrc,
//lrcShowID:'sLRC',
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://link.hhtjim.com/163/1298528307.mp3'
};
new lrcPlayerY(opts);
</script> 分屏展现~~~锦绣中华! 美不胜收! 好帖，欣赏学习！ 这么多动图，如同蜂巢一样展示在帖子里，每一幅都是美丽山河之一。真漂亮的制作，很赞{:4_187:} 阙歌 发表于 2022-9-28 13:17
分屏展现~~~锦绣中华! 美不胜收!
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
感谢您的欣赏！
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
深秋红枫 发表于 2022-9-28 15:05
好帖，欣赏学习！
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
感谢您的欣赏！
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg> 红影 发表于 2022-9-28 15:18
这么多动图，如同蜂巢一样展示在帖子里，每一幅都是美丽山河之一。真漂亮的制作，很赞
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
感谢您的欣赏！
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg> 起个网名好难 发表于 2022-9-28 15:39
感谢您的欣赏！
好漂亮的帖子，再赏好帖{:4_187:} 红影 发表于 2022-9-28 18:57
好漂亮的帖子，再赏好帖
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
再次感谢您的支持！
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
起个网名好难 发表于 2022-9-28 19:14
再次感谢您的支持！
这么多动图，找起来很不容易，辛苦了{:4_187:} 精彩的制作，呈现出前所未有的立体角度，美轮美奂，展示了中国“，幅原辽阔，地大物博，
是地球上一颗最璀璨的明珠！
赞~
{:4_199:}{:4_199:}{:4_204:} 大猫咪 发表于 2022-9-28 19:30
精彩的制作，呈现出前所未有的立体角度，美轮美奂，展示了中国“，幅原辽阔，地大物博，
是地球上一颗最璀 ...
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
感谢您的欣赏、支持！
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
醉美水芙蓉 发表于 2022-9-28 19:38
欣赏老师精美音画！
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
感谢您的欣赏、支持！
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg> <svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 200 200
m -150, 150
a 200,100 0 1,0 400,0
a 200,100 0 1,1 400,0
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
制作的真漂亮谢谢分享
<animate attributeName="startOffset" from="0" to ="1028" begin="0s" dur="10s" repeatCount="indefinite" />
小辣椒 发表于 2022-9-28 21:39
制作的真漂亮谢谢分享
感谢您的欣赏和支持！ 新颖别致的好帖！赞！赞！赞！ 相约爱晚亭 发表于 2022-10-4 13:51
新颖别致的好帖！赞！赞！赞！
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="myPath"
d="M 100 100 h 800"/>
</defs>
<use xlink:href="#myPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#myPath">
感谢欣赏重阳节快乐!
<animate attributeName="startOffset" from="0" to ="800" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg> 起个网名好难 发表于 2022-10-4 14:06
感谢欣赏重阳节快乐!
重阳节快乐！ 绝对高人！{:5_116:}
页:
[1]
2