长卷 --- 大美江山

起个网名好难 发表于 2022-10-22 11:05

本帖最后由起个网名好难于 2022-10-24 07:45 编辑 <br /><br /><style>
.descTitle{fill:transparent;stroke-width:1;stroke-dasharray:0 300;stroke-dashoffset:0;stroke:hsl(0,100%,40%);letter-spacing:1em;font-size:5em;animation:varstroke 20s ease-in-out infinite alternate;}@keyframes varstroke{to{stroke-dashoffset:2000;stroke-dasharray:300 0;}}.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:1px solid gray;border-radius:50%;display:inline-block;width:60px;height:60px;margin:0px;position:absolute;bottom:30px;right:50px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background-image:conic-gradient(hsl(0,100%,50%),hsl( 18,100%,50%),hsl( 36,100%,50%),hsl( 54,100%,50%),hsl( 72,100%,50%),hsl( 90,100%,50%),hsl(108,100%,50%),hsl(126,100%,50%),hsl(144,100%,50%),hsl(162,100%,50%),hsl(180,100%,50%),hsl(198,100%,50%),hsl(216,100%,50%),hsl(234,100%,50%),hsl(252,100%,50%),hsl(270,100%,50%),hsl(288,100%,50%),hsl(306,100%,50%),hsl(324,100%,50%),hsl(342,100%,50%) );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);}}
</style>

<div style="width:1200px;overflow:hidden;position:relative;border-radius:24px;margin:100px 16px 32px -300px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 1000 640" id="svgadmin"></svg>

<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:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}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)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.audioCtrl.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>

<script type="text/javascript">
let pics = [
"https://s1.ax1x.com/2022/10/21/xclXVK.jpg",
"https://s1.ax1x.com/2022/10/21/xcl6vn.jpg",
"https://s1.ax1x.com/2022/10/21/xcls3j.jpg",
"https://s1.ax1x.com/2022/10/21/xclguq.jpg",
"https://s1.ax1x.com/2022/10/21/xclrCQ.jpg",
"https://s1.ax1x.com/2022/10/21/xclRbV.jpg",
"https://s1.ax1x.com/2022/10/21/xcl0US.jpg",
"https://s1.ax1x.com/2022/10/21/xclwE8.jpg",
"https://s1.ax1x.com/2022/10/21/xclB4g.jpg",
"https://s1.ax1x.com/2022/10/21/xcl2D0.jpg",
"https://s1.ax1x.com/2022/10/21/xclfET.jpg",
"https://s1.ax1x.com/2022/10/21/xclhUU.jpg",
"https://s1.ax1x.com/2022/10/21/xcl45F.jpg",
"https://s1.ax1x.com/2022/10/21/xclIC4.jpg",
"https://s1.ax1x.com/2022/10/21/xcl7vR.jpg",
"https://s1.ax1x.com/2022/10/21/xclbK1.jpg",
"https://s1.ax1x.com/2022/10/21/xclLb6.jpg",
"https://s1.ax1x.com/2022/10/21/xclo8J.jpg",
"https://s1.ax1x.com/2022/10/21/xclqDx.jpg",
"https://s1.ax1x.com/2022/10/21/xclT29.jpg"
];
let svgStr = '<g transform="rotate(-90)">\n';
for(idx = 0 ; idx < pics.length; idx++) {
svgStr += '<image xlink:href="' + pics;
svgStr += '" width="640" height="1173.5" opacity=\'0\' x="-640" y="0" preserveAspectRatio="none">\n';
svgStr += '<set attributename="opacity" to="1" begin="p' + idx + '.begin" ></set>\n';
if(idx == 0) {
svgStr += '<animate id="p' + idx + '" attributename="y" from="0" to="-1173.5" begin="0; p' + pics.length + '.end"';
svgStr += ' dur="11.735" fill="freeze"></animate>\n';
svgStr += '<set attributename="opacity" to="0" begin="p' + idx + '.begin+11.735"></set>\n';
}
else {
svgStr += '<animate id="p' + idx + '" attributename="y" from="1000" to="-1173.5" begin="p' + (idx-1) + '.end-10"';
svgStr += ' dur="21.735" fill="freeze"></animate>\n';
svgStr += '<set attributename="opacity" to="0" begin="p' + idx + '.begin+21.735"></set>\n';

}
svgStr += '</image>\n'
}
svgStr += '<image xlink:href="' + pics;
svgStr += '" width="640" height="1173.5" opacity=\'0\' x="-640" y="1000" preserveAspectRatio="none">\n';
svgStr += '<set attributename="opacity" to="1" begin="p' + pics.length + '.begin" ></set>\n';
svgStr += '<animate id="p' + pics.length + '" attributename="y" from="1000" to="0" begin="p' + (pics.length - 1) + '.end-10"';
svgStr += ' dur="10" fill="freeze"></animate>\n';
svgStr += '<set attributename="opacity" to="0" begin="p' + pics.length + '.begin+10"></set>\n';
svgStr += '</image></g>\n';
svgStr += '<text text-anchor="middle" x="50%" y="30%" class="descTitle">大美江山</text>\n';

svgadmin.innerHTML = svgStr;

svgadmin.onmouseover = () => svgadmin.pauseAnimations();
svgadmin.onmouseout = () => svgadmin.unpauseAnimations();

var lrc =`江山如画 - 李丹阳
词：贺东久
曲：印青
你是我春光的明媚
你是我夏日的芳华
你是我秋色的金黄
你是我冬雪的潇洒
生生不息在你怀抱里
代代儿女为你心融化
青山连江海
白鸽舞朝霞
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你是我希望的彩虹
你是我奔腾的骏马
你是我生命的摇篮
你是我远行的牵挂
心心相印为你织锦绣
默默耕耘在你阳光下
热血润热土
泪花浇心花
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
你古老而又灿烂
你年轻而又挺拔
年年岁岁情不变
江山如画是我家
江山如画是我家
`;

var opts = {
lrcTxt:lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.qqmc.com/up/kwlink.php?id=22855038&.mp3'
};
new lrcPlayerY(opts);

</script>

深秋红枫 发表于 2022-10-22 12:17

欣赏佳作。古风长卷结合现代元素，画面状观有气势，太美了！点赞、收藏！

相约爱晚亭 发表于 2022-10-22 14:03

鼠标可控制画面暂停，高科技元素。欣赏精美长卷音画佳作！

起个网名好难 发表于 2022-10-22 16:11

深秋红枫发表于 2022-10-22 12:17
欣赏佳作。古风长卷结合现代元素，画面状观有气势，太美了！点赞、收藏！

谢谢欣赏

起个网名好难 发表于 2022-10-22 16:11

相约爱晚亭发表于 2022-10-22 14:03
鼠标可控制画面暂停，高科技元素。欣赏精美长卷音画佳作！

谢谢欣赏

醉美水芙蓉 发表于 2022-10-22 16:58

回忆发表于 2022-10-22 17:15

看不见其他的

起个网名好难 发表于 2022-10-22 18:20

回忆发表于 2022-10-22 17:15
看不见其他的

图片装载较慢，多点耐心。

起个网名好难 发表于 2022-10-22 18:21

醉美水芙蓉发表于 2022-10-22 16:58
欣赏老师佳作！

谢谢欣赏

红影发表于 2022-10-23 21:02

非常漂亮的制作，歌词同步和SVG文字加得也漂亮。欣赏老师精美制作{:4_187:}

起个网名好难 发表于 2022-10-23 21:10

本帖最后由起个网名好难于 2022-10-23 21:11 编辑 <br /><br />红影发表于 2022-10-23 21:02
非常漂亮的制作，歌词同步和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 -100, 150
   a 300,200 0 1,0 600,0
   a 300,200 0 1,0 -600,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 ="1656" begin="0s" dur="10s" repeatCount="indefinite" />

</textPath>
</text>
</svg>

红影发表于 2022-10-24 16:57

起个网名好难发表于 2022-10-23 21:10
本帖最后由起个网名好难于 2022-10-23 21:11 编辑

长卷描绘了大美河山，好美{:4_187:}

起个网名好难 发表于 2022-10-24 17:57

红影发表于 2022-10-24 16:57
长卷描绘了大美河山，好美

谢谢！

不会做图只好找些素材来拼凑。

红影发表于 2022-10-24 22:36

起个网名好难发表于 2022-10-24 17:57
谢谢！

不会做图只好找些素材来拼凑。

谦虚了，能找到这么多颇具时代气息的素材也很不易，足见用心{:4_204:}

起个网名好难 发表于 2022-10-24 22:38

红影发表于 2022-10-24 22:36
谦虚了，能找到这么多颇具时代气息的素材也很不易，足见用心

在微信的公众号里找

红影发表于 2022-10-24 23:21

起个网名好难发表于 2022-10-24 22:38
在微信的公众号里找

各个途径，殊途同归{:4_173:}

起个网名好难 发表于 2022-10-25 07:08

红影发表于 2022-10-24 23:21
各个途径，殊途同归

还是会做图的高，羡慕不来。

红影发表于 2022-10-25 09:43

起个网名好难发表于 2022-10-25 07:08
还是会做图的高，羡慕不来。

哈哈，我也不会作图，咱们难兄难弟{:4_173:}

起个网名好难 发表于 2022-10-25 10:54

红影发表于 2022-10-25 09:43
哈哈，我也不会作图，咱们难兄难弟

你选的图片都很漂亮，还是高

红影发表于 2022-10-25 11:16

起个网名好难发表于 2022-10-25 10:54
你选的图片都很漂亮，还是高

毕竟不是自己做的呀，终是落了下乘{:4_173:}

页: [1] 2

花潮论坛's Archiver

长卷 --- 大美江山