论坛 › 动画音画 › 春天来了

起个网名好难 发表于 2024-2-23 14:32

春天来了

本帖最后由 起个网名好难 于 2024-2-23 14:16 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
.lrcShow{font:bold 3em '仿宋';position:absolute;width:1.2em;left:50px;top:100px;color:lightgray;filter:drop-shadow(1px 1px 1px white);
letter-spacing:2px;cursor:pointer; z-index:100;writing-mode: vertical-rl;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:blue;writing-mode: vertical-rl;
background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}

@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }

#indicator        {position:absolute;left:30%;bottom:10px;width:40%;z-index:100; appearance: none; height:8px; overflow:hidden; border-radius: 8px;}
#indicator::-webkit-progress-bar        {background:pink;}
#indicator::-webkit-progress-value        {background:green;}

#btnplay { width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear ; animation-play-state: var(--state);position:absolute; left:calc(50% - 30px); bottom:30px; z-index:100;}
@keyframes rotating { to { transform: rotate(360deg); } }

#oBlk        {width:800px;overflow:hidden;border-radius:24px;box-shadow:4px 4px 8px black;position:relative;
background:pink url(https://mmbiz.qpic.cn/mmbiz_jpg/AiatPyc4VpoE4ov424vibRniappoeMbm81n6BTtooQ4OwpAXX5xhTEaGPnsGjWGm55icibZ5tFKjDNErQiaUhjKc7u0A/640);margin:100px 0 32px calc(50% - 480px);
}
</style>
<div id="oBlk">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 540 810" >
<defs>
<!--         棋盘格        -->
        <pattern id="pm0" width="200" height="200" patternUnits="userSpaceOnUse">   
                <rect x='0' y='0' width='100' height='100'   fill="white" ></rect>
                <rect x='100' y='0' width='100' height='100'fill="black" >
                <animate attributename="fill" from='black' to='white' dur='3' begin='bpic0.begin' fill="freeze" />
                </rect>
                <rect x='0' y='100' width='100' height='100'   fill="black" >
                <animate attributename="fill" from='black' to='white' dur='3' begin='bpic0.begin' fill="freeze" />
                </rect>
                <rect x='100' y='100' width='100' height='100'fill="white" ></rect>
        </pattern>
        <mask id="mask0" x="0" y="0" width="540" height="810" >
                <rect y="0" y="0" width="540" height="810" style="fill:url(#pm0)" />
        </mask>
<!--         竖条百叶窗         -->
        <pattern id="pm1" width="50" height="50" patternUnits="userSpaceOnUse">   
                <rect x='0' y='0' width='0' height='50' fill="white" >       
                <animate attributename="width" from='0' to='50' dur='3' begin='bpic0.begin' fill="freeze" />
                </rect>       
        </pattern>
        <mask id="mask1" x="0" y="0" width="540" height="810" >
                <rect y="0" y="0" width="540" height="810" style="fill:url(#pm1)" />
        </mask>
<!--         横条百叶窗         -->
        <pattern id="pm2" width="50" height="50" patternUnits="userSpaceOnUse">   
                <rect x='0' y='0' width='50' height='0' fill="white" >       
                <animate attributename="height" from='0' to='50' dur='3' begin='bpic0.begin' fill="freeze" />
                </rect>       
        </pattern>
        <mask id="mask2" x="0" y="0" width="540" height="810" >
                <rect y="0" y="0" width="540" height="810" style="fill:url(#pm2)" />
        </mask>
<!--         三角0         -->
        <pattern id="pm3" width="200" height="100" patternUnits="userSpaceOnUse">   
                <rect x='0' y='0' width='200' height='100' fill="white" style="clip-path: polygon(0 0, 0 100%, 100% 0);"/>       
                <rect x='0' y='0' width='200' height='100' fill="black" style="clip-path: polygon(100% 0, 0 100%, 100% 100%);" >       
                <animate attributename="fill" from='black' to='white' dur='3' begin='bpic0.begin' fill="freeze" />
                </rect>       
        </pattern>
        <mask id="mask3" x="0" y="0" width="540" height="810" >
                <rect y="0" y="0" width="540" height="810" style="fill:url(#pm3)" />
        </mask>
<!--         三角1         -->
        <pattern id="pm4" width="200" height="100" patternUnits="userSpaceOnUse">   
                <rect x='0' y='0' width='200' height='100' fill="white" style="clip-path: polygon(0 0, 0% 100%, 100% 100%);"/>       
                <rect x='0' y='0' width='200' height='100' fill="black" style="clip-path: polygon(100% 0, 0 0, 100% 100%);" >       
                <animate attributename="fill" from='black' to='white' dur='3' begin='bpic0.begin' fill="freeze" />
                </rect>       
        </pattern>
        <mask id="mask4" x="0" y="0" width="540" height="810" >
                <rect y="0" y="0" width="540" height="810" style="fill:url(#pm4)" />
        </mask>
</defs>

<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/AiatPyc4VpoE4ov424vibRniappoeMbm81n6BTtooQ4OwpAXX5xhTEaGPnsGjWGm55icibZ5tFKjDNErQiaUhjKc7u0A/640" opacity="0" x="0" y="0" width="540" height="810" preserveAspectRatio="none" >
<animate id="bpic0" attributeName="opacity" from="0" to="1" begin="0;epic4.end-2" dur="2" fill="freeze"></animate>
<animate id="epic0" attributeName="opacity" from="1" to="0" begin="bpic0.begin+7" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/AiatPyc4VpoE4ov424vibRniappoeMbm81nJFbFz4I5bFjictP6tVQZJeDGe7lF1fhDJThEOhE9P0waic5hniaGAtZeA/640" opacity="0" x="0" y="0" width="540" height="810" preserveAspectRatio="none" >
<animate id="bpic1" attributeName="opacity" from="0" to="1" begin="epic0.end-2" dur="2" fill="freeze"></animate>
<animate id="epic1" attributeName="opacity" from="1" to="0" begin="bpic1.begin+7" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/AiatPyc4VpoE4ov424vibRniappoeMbm81n9ja6nozFiccPESMtBibxYPZnrTHCXcIba2Xq9pJFtoWXjZiaJibh0x7nCA/640" opacity="0" x="0" y="0" width="540" height="810" preserveAspectRatio="none" >
<animate id="bpic2" attributeName="opacity" from="0" to="1" begin="epic1.end-2" dur="2" fill="freeze"></animate>
<animate id="epic2" attributeName="opacity" from="1" to="0" begin="bpic2.begin+7" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/AiatPyc4VpoE4ov424vibRniappoeMbm81nPVcicNrsb5zW5rnohYKtSvbPJ4AgnD4crKHCZiaibBdiaRY2UvmyMMWCCQ/640" opacity="0" x="0" y="0" width="540" height="810" preserveAspectRatio="none" >
<animate id="bpic3" attributeName="opacity" from="0" to="1" begin="epic2.end-2" dur="2" fill="freeze"></animate>
<animate id="epic3" attributeName="opacity" from="1" to="0" begin="bpic3.begin+7" dur="2" fill="freeze"></animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/AiatPyc4VpoE4ov424vibRniappoeMbm81n6BTtooQ4OwpAXX5xhTEaGPnsGjWGm55icibZ5tFKjDNErQiaUhjKc7u0A/640" opacity="0" x="0" y="0" width="540" height="810" preserveAspectRatio="none" >
<animate id="bpic4" attributeName="opacity" from="0" to="1" begin="epic3.end-2" dur="2" fill="freeze"></animate>
<animate id="epic4" attributeName="opacity" from="1" to="0" begin="bpic4.begin+7" dur="2" fill="freeze"></animate>
</image>

</svg>
        <img id="btnplay" src="https://s11.ax1x.com/2024/01/23/pFe99B9.png" title="点击暂停" alt="" ><br>
        <div class="lrcShow" data-lrc="春天来了"></div>
        <progress id="indicator" value='0' max='100' ></progress>
</div>

<script>
{
        let bstrs = [];
        let masks = document.getElementsByTagName("mask");
        for(n = 0; n < masks.length; n++)        bstrs="";
        let pts = document.getElementsByTagName("pattern");

        let mStart = parseInt(Math.random() * masks.length);
        let imgs = document.getElementsByTagName('image');
        for(n = 0; n < imgs.length; n++)        {
                imgs.setAttribute('mask','url(#mask' + mStart + ')');
                bstrs += 'bpic' + n + '.begin;';
                mStart++; mStart %= pts.length;
        }
        for(n = 0; n < pts.length; n++)        {
                aniObjs = pts.getElementsByTagName("animate");
                for(j = 0; j < aniObjs.length; j++)        aniObjs.setAttribute('begin', bstrs);
        }
/**----------------------------------------------------------------------------------**/
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.lrcShowObj=document.querySelector('.lrcShow');this.indicator=opts.indicator;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(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:+_0.toFixed(2),words:lrcTxt})}}}lrcs.sort(function(a,b){return(a.seconds-b.seconds)});for(k=0;k<lrcs.length-1;k++){lrcs.dur=+(lrcs.seconds-lrcs.seconds).toFixed(2)}return lrcs},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+'s');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);this.idx=0;this.mObj.addEventListener('ended',()=>{this.idx=0;this.mObj.play()});this.mObj.addEventListener('canplay',()=>{this.lrcVec.dur=+(this.mObj.duration-this.lrcVec.seconds).toFixed(2)});this.mObj.addEventListener('play',()=>{this.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',()=>{if(this.idx==1&&this.mObj.currentTime<1){this.mObj.play();return false}this.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',()=>{console.log("audio wrong, remove play start event");this.lrcShowObj.style.display='none';this.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',()=>{if(this.indicator){this.indicator.value=this.mObj.currentTime/this.mObj.duration*100}if(this.idx<this.lrcVec.length){if(this.mObj.currentTime>=this.lrcVec.seconds){this.showLrc(this.lrcVec.dur)}}});this.lrcShowObj.addEventListener('click',()=>{if(this.mObj.paused){this.mObj.play()}else{this.mObj.pause()}})}}
/**-----------------------------------------------------------------------------------**/
let lrcStr = `\n儿歌宝贝—春天来了\n作词：乔洋\n作曲：乔洋\n编曲：乔洋\n录音师：彭俐\n混音师：乔洋\n统筹：刘铭法\n制作人：乔洋\n监制：韦琪\n制作公司：音你而来\n转眼间又到了春天\n万物复苏微风轻拂笑脸\n山那边盛开的花园\n迫不及待春游玩上一天\n阳光暖暖围绕在身边\n蝴蝶蝴蝶飞舞翩翩\n我想安静的坐在湖边\n像画家记录美丽一切\n一年之计在于整个春天\n努力去把梦想实现\n我们的未来一定风光无限\n加油加油勇往直前\n一年之计在于整个春天\n甩掉懒惰充实今天\n拥抱大自然欣赏辽阔蓝天\n快乐就在你我身边\n转眼间又到了春天\n万物复苏微风轻拂笑脸\n山那边盛开的花园\n迫不及待春游玩上一天\n阳光暖暖围绕在身边\n蝴蝶蝴蝶飞舞翩翩\n我想安静的坐在湖边\n像画家记录美丽一切\n一年之计在于整个春天\n努力去把梦想实现\n我们的未来一定风光无限\n加油加油勇往直前\n一年之计在于整个春天\n甩掉懒惰充实今天\n拥抱大自然欣赏辽阔蓝天\n快乐就在你我身边\n一年之计在于整个春天\n努力去把梦想实现\n我们的未来一定风光无限\n加油加油勇往直前\n一年之计在于整个春天\n甩掉懒惰充实今天\n拥抱大自然欣赏辽阔蓝天\n快乐就在你我身边\n\n
`;
//------------------------------------------------------------------
var opts = {
    lrcTxt:lrcStr,
    audioURL:"https://music.163.com/song/media/outer/url?id=1438836506.mp3",
        indicator: indicator,
}
var lrcPlayerY = new lrcPlayerY(opts);

btnplay.onclick = function() {
    if (lrcPlayerY.mObj.paused) {
                this.style.animationPlayState = 'running';
                lrcPlayerY.mObj.play();
    } else {
                this.style.animationPlayState = 'paused';
                lrcPlayerY.mObj.pause();
    }
};

}
</script>

梦江南 发表于 2024-2-23 18:41

欣赏老师漂亮的春天音画佳作！

起个网名好难 发表于 2024-2-23 18:43

梦江南 发表于 2024-2-23 18:41
欣赏老师漂亮的春天音画佳作！

谢谢！

今天抽空来上网了？

红影 发表于 2024-2-23 18:53

这么多漂亮的三角梅，这么多漂亮的轮转特效。
欣赏难难好帖{:4_199:}

红影 发表于 2024-2-23 18:54

好像没完全居中呢{:4_204:}

起个网名好难 发表于 2024-2-23 18:56

红影 发表于 2024-2-23 18:53
这么多漂亮的三角梅，这么多漂亮的轮转特效。
欣赏难难好帖

谢谢支持鼓励！

起个网名好难 发表于 2024-2-23 18:59

红影 发表于 2024-2-23 18:54
好像没完全居中呢

对论坛的发帖框是没有居中，但对于屏幕窗口是不是就居中了。

红影 发表于 2024-2-23 20:09

起个网名好难 发表于 2024-2-23 18:56
谢谢支持鼓励！

问好难难，元宵节快乐{:4_187:}

红影 发表于 2024-2-23 20:09

起个网名好难 发表于 2024-2-23 18:59
对论坛的发帖框是没有居中，但对于屏幕窗口是不是就居中了。

这个我不知道啊，我就看了个论坛情况啊{:4_173:}

起个网名好难 发表于 2024-2-23 20:41

红影 发表于 2024-2-23 20:09
问好难难，元宵节快乐

时间过得真快，明天就是十五了。
https://img2.baidu.com/it/u=469048164,2440469094&fm=253&fmt=auto&app=138&f=JPEG

起个网名好难 发表于 2024-2-23 20:45

红影 发表于 2024-2-23 20:09
这个我不知道啊，我就看了个论坛情况啊

这帖的宽度比框略宽，不可能在框内居中，如果是一楼的两个框放在一起看，马马虎虎就是居中了。

起个网名好难 发表于 2024-2-23 20:52

红影 发表于 2024-2-23 20:09
这个我不知道啊，我就看了个论坛情况啊



这样看是不是就居中了

红影 发表于 2024-2-23 20:56

起个网名好难 发表于 2024-2-23 20:41
时间过得真快，明天就是十五了。

快乐的元宵节，大家一起快乐{:4_177:}

红影 发表于 2024-2-23 20:56

起个网名好难 发表于 2024-2-23 20:45
这帖的宽度比框略宽，不可能在框内居中，如果是一楼的两个框放在一起看，马马虎虎就是居中了。

应该算展示的那个框的啊{:4_189:}

红影 发表于 2024-2-23 20:57

起个网名好难 发表于 2024-2-23 20:52
这样看是不是就居中了

难难还去量了一下，太认真了{:4_196:}

起个网名好难 发表于 2024-2-23 21:21

红影 发表于 2024-2-23 20:57
难难还去量了一下，太认真了

用 ScreenRuler 在屏幕上一拉就有了{:5_117:}

起个网名好难 发表于 2024-2-23 21:23

红影 发表于 2024-2-23 20:56
应该算展示的那个框的啊

如果仅在展示的那个框帖子就出了右边框一点点没法居中（无论何种意义上）。

红影 发表于 2024-2-23 22:23

起个网名好难 发表于 2024-2-23 21:21
用 ScreenRuler 在屏幕上一拉就有了

像素尺我也装了，很少去用呢{:4_173:}

红影 发表于 2024-2-23 22:24

起个网名好难 发表于 2024-2-23 21:23
如果仅在展示的那个框帖子就出了右边框一点点没法居中（无论何种意义上）。

不去管了，这个帖子很漂亮的呢{:4_199:}

醉美水芙蓉 发表于 2024-2-24 07:24

查看完整版本: 春天来了