论坛 › 动画音画 › 山河美

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

山河美

本帖最后由 起个网名好难 于 2022-10-17 19:08 编辑 <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:1px solid black;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: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);}}
        .mCtrl        {
                width:40px;height:40px;right:120px;
                /****
                background-image:url(data/attachment/forum/202209/24/224500cco531c1941cynbf.png);
                ****/
        }
        .lrcShow{font-size:2.5em;font-family:宋体;}
        .lrcShow::before{color:yellow;}
</style>
<div style="width:1200px;overflow:hidden;position:relative;border-radius:24px;margin:100px 16px 32px -300px;
box-shadow:2px 2px 8px 4px lightgray;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 1000 440">

<g transform="rotate(-90)">
<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGwin.jpg"
width="440" height="6535.16" opacity='0' x="-440" y="0" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p0.begin" ></set>
<animate id='p0' attributename="y" from="0" to="-6535.16" begin="0; pa.end" dur="65.3516" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p0.begin+65.3516"></set>
</image>
<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGYqg.jpg"
width="440" height="10554.7" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p1.begin" ></set>
<animate id='p1' attributename="y" from="1000" to="-10554.7" begin="p0.end-10" dur="115.547" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p1.begin+115.547"></set>
</image>
<image xlink:href="https://s1.ax1x.com/2022/10/03/xQG1RP.jpg"
width="440" height="7633.03" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p2.begin" ></set>
<animate id='p2' attributename="y" from="1000" to="-7633.03" begin="p1.end-10" dur="86.3303" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p2.begin+86.3303"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQG3xf.jpg"
width="440" height="6675.45" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p3.begin" ></set>
<animate id='p3' attributename="y" from="1000" to="-6675.45" begin="p2.end-10" dur="76.7545" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p3.begin+76.7545"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGGM8.jpg"
width="440" height="7249.36" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p4.begin" ></set>
<animate id='p4' attributename="y" from="1000" to="-7249.36" begin="p3.end-10" dur="82.4936" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p4.begin+82.4936"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGJsS.jpg"
width="440" height="7337.58" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p5.begin" ></set>
<animate id='p5' attributename="y" from="1000" to="-7337.58" begin="p4.end-10" dur="83.3758" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p5.begin+83.3758"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGUaj.jpg"
width="440" height="9249.14" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p6.begin" ></set>
<animate id='p6' attributename="y" from="1000" to="-9249.14" begin="p5.end-10" dur="102.4914" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p6.begin+102.4914"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGNZQ.jpg"
width="440" height="6643.56" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p7.begin" ></set>
<animate id='p7' attributename="y" from="1000" to="-6643.56" begin="p6.end-10" dur="76.4356" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p7.begin+76.4356"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGaIs.jpg"
width="440" height="14417" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p8.begin" ></set>
<animate id='p8' attributename="y" from="1000" to="-14417" begin="p7.end-10" dur="154.17" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p8.begin+154.17"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQG0Gq.jpg"
width="440" height="10032.8" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="p9.begin" ></set>
<animate id='p9' attributename="y" from="1000" to="-10032.8" begin="p8.end-10" dur="110.328" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="p9.begin+110.328"></set>
</image>

<image xlink:href="https://s1.ax1x.com/2022/10/03/xQGwin.jpg"
width="440" height="6535.16" opacity='0' x="-440" y="1000" preserveAspectRatio="none">
<set attributename="opacity" to="1" begin="pa.begin" ></set>
<animate id='pa' attributename="y" from="1000" to="0" begin="p9.end-10" dur="10" fill="freeze"></animate>
<set attributename="opacity" to="0" begin="pa.begin+10"></set>
</image>

</g>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
新疆
<animate attributename="opacity" from='0' to='1' begin="p0.begin+1s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p0.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
甘肃
<animate attributename="opacity" from='0' to='1' begin="p1.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p1.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
青海
<animate attributename="opacity" from='0' to='1' begin="p2.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p2.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
四川
<animate attributename="opacity" from='0' to='1' begin="p3.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p3.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
贵州
<animate attributename="opacity" from='0' to='1' begin="p4.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p4.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
云南
<animate attributename="opacity" from='0' to='1' begin="p5.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p5.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
西藏
<animate attributename="opacity" from='0' to='1' begin="p6.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p6.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
陕西
<animate attributename="opacity" from='0' to='1' begin="p7.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p7.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
江西
<animate attributename="opacity" from='0' to='1' begin="p8.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p8.end-5s" dur="2s" fill="freeze"></animate>
</text>
<text x='50' y='80' opacity='0' style="fill:yellow; stroke:darkred;stroke-width:2px; font:bold 4em 微软雅黑;">
广西
<animate attributename="opacity" from='0' to='1' begin="p9.begin+11s" dur='2s' fill="freeze"></animate>
<animate attributename="opacity" from="1" to="0" begin="p9.end-5s" dur="2s" fill="freeze"></animate>
</text>
</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\u0063\u0065\u0073\u0068\u006f\u006c\u006c'})}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">
var lrc =`
作词 : 刘于谦/张增
作曲 : 张丰
编曲 : 91音乐

南方的艳阳天 塞北雪花飞
江山如此多娇醉透我心扉
谁在唱着歌谣像潺潺的流水
春夏秋冬让人如痴如醉
巍巍的大中华群山多峻美
蓝天飘着白云春风阵阵吹
一片片的姹紫嫣红小草吐芳菲
我要大声歌唱 歌唱你的美
壮丽山河美 壮丽山河美
五十六个民族心与心相随
滔滔的黄河水养育一辈又一辈
谱写多少英雄历史的丰碑
壮丽山河美 壮丽山河美
龙的精神响彻了天南地北
华夏的儿女 歌颂一辈又一辈
锦绣的河山五千年光辉

巍巍的大中华群山多峻美
蓝天飘着白云春风阵阵吹
一片片的姹紫嫣红小草吐芳菲
我要大声歌唱 歌唱你的美
壮丽山河美 壮丽山河美
五十六个民族心与心相随
滔滔的黄河水养育一辈又一辈
谱写多少英雄历史的丰碑
壮丽山河美 壮丽山河美
龙的精神响彻了天南地北
华夏的儿女 歌颂一辈又一辈
锦绣的河山五千年光辉
壮丽山河美 壮丽山河美
五十六个民族心与心相随
滔滔的黄河水养育一辈又一辈
谱写多少英雄历史的丰碑
壮丽山河美 壮丽山河美
龙的精神响彻了天南地北
华夏的儿女 歌颂一辈又一辈
锦绣的河山五千年光辉
锦绣的河山五千年光辉

发行 : 安雨琪枫文化传媒
`;

var opts = {
        lrcTxt:lrc,
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://music.163.com/song/media/outer/url?id=1927100354.mp3'
};
new lrcPlayerY(opts);
</script>

红影 发表于 2022-10-4 10:40

漂亮的滚动画卷，看到了各个省市的美景，真是壮丽的山河之美。很让人振奋的帖子{:4_187:}

起个网名好难 发表于 2022-10-4 11:13

红影 发表于 2022-10-4 10:40
漂亮的滚动画卷，看到了各个省市的美景，真是壮丽的山河之美。很让人振奋的帖子

<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 11:14

欣赏精美音画佳作！宏篇巨制！大赞！宽幅图片怎样制作？可否说说。

起个网名好难 发表于 2022-10-4 11:18

本帖最后由 起个网名好难 于 2022-10-4 11:20 编辑 <br /><br />相约爱晚亭 发表于 2022-10-4 11:14
欣赏精美音画佳作！宏篇巨制！大赞！宽幅图片怎样制作？可否说说。


<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 11:41

新疆是个好地方。欣赏大作。

醉美水芙蓉 发表于 2022-10-4 11:49

相约爱晚亭 发表于 2022-10-4 13:56

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




写个教程吧，像黑黑老师那样开个专版。

起个网名好难 发表于 2022-10-4 14:07

相约爱晚亭 发表于 2022-10-4 13:56
写个教程吧，像黑黑老师那样开个专版。

水平不够，不敢献丑{:5_102:}

起个网名好难 发表于 2022-10-4 14:10

马黑黑 发表于 2022-10-4 11:41
新疆是个好地方。欣赏大作。


<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:12

醉美水芙蓉 发表于 2022-10-4 11:49
欣赏老师佳作！


<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:33

起个网名好难 发表于 2022-10-4 14:07
水平不够，不敢献丑

只要身体健康，开心就好！

红影 发表于 2022-10-4 17:01

起个网名好难 发表于 2022-10-4 11:13
感谢您的欣赏 国庆假期愉快！
            


不客气，假期快乐{:4_187:}

深秋红枫 发表于 2022-10-4 17:06

欣赏好贴！感谢分享！

深秋红枫 发表于 2022-10-4 17:13

本帖最后由 深秋红枫 于 2022-10-4 17:14 编辑

相约爱晚亭 发表于 2022-10-4 14:33
只要身体健康，开心就好！
下原代码，分析探究，试着填新图，就是您的作品了。不过这是SVG代码作品，要弄明白有一定难度。不必急于求成，仿造即可！

相约爱晚亭 发表于 2022-10-4 17:31

深秋红枫 发表于 2022-10-4 17:13
下原代码，分析探究，试着填新图，就是您的作品了。不过这是SVG代码作品，要弄明白有一定难度。不必急于 ...

谢谢指教！重阳节快乐！

起个网名好难 发表于 2022-10-4 18:03

深秋红枫 发表于 2022-10-4 17:06
欣赏好贴！感谢分享！


<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-5 19:13

代码高手！{:4_204:}

起个网名好难 发表于 2022-10-5 19:22

东篱闲人 发表于 2022-10-5 19:13
代码高手！


<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-5 19:30

起个网名好难 发表于 2022-10-5 19:22
感谢欣赏！向您学习!

不敢不敢。。。。{:5_117:}

查看完整版本: 山河美