起个网名好难 发表于 2024-2-27 18:37

观世音菩萨

本帖最后由 起个网名好难 于 2024-2-27 20:09 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
#oBlk         {width:602px;height:800px;position:relative;margin:auto;overflow:hidden;border-radius:32px;box-shadow:4px 4px 10px black;background-color:hsl(5, 72%, 92%);font-size:12px;}
.lrcShow{font:bold 3em 楷体,楷体_GB2312;position:absolute;width:80%;height:2em;bottom:0px;left:20%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;
--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;
background: repeating-linear-gradient(45deg, white 1px, transparent 2px, gray 4px), repeating-linear-gradient(-45deg, white 1px, transparent 2px, gray 4px); -webkit-background-clip: text;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;
background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));
-webkit-background-clip:text;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%;}}
//.lrcShow::before{color:transparent;background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);}
</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 602 800">
<defs>
<mask id="mask0" x="0" y="0" width="602" height="800">
<circle cx="301" cy="400" r="10" style="stroke:#006600; fill:#ffffff;">
<animate attributename="r" from="10" to="800" dur="2" fill="freeze">
</animate>
</circle>
</mask>
<mask id="mask1" x="0" y="0" width="602" height="800">
<ellipse cx="301" cy="400" rx="7.525" ry="10" style="stroke:#006600; fill:#ffffff;">
<animate attributename="rx" from="7.525" to="451.5" dur="2" fill="freeze">
</animate>
<animate attributename="ry" from="10" to="600" dur="2" fill="freeze">
</animate>
</ellipse>
</mask>
<mask id="mask2" x="0" y="0" width="602" height="800">
<rect x="293.475" y="390" width="7.525" height="10" style="stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="7.525" to="602" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="10" to="800" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="293.475" to="0" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="390" to="0" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask3" x="0" y="0" width="602" height="800">
<rect x="289" y="388" width="12" height="12" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="289" to="-499" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="388" to="-400" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask4" x="0" y="0" width="602" height="800">
<rect x="289" y="388" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="289" to="-499" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="388" to="-400" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask5" x="0" y="0" width="602" height="800">
<rect x="289" y="388" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="289" to="-499" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="388" to="-400" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask6" x="0" y="0" width="602" height="800">
<rect x="289" y="388" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1600" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="289" to="-499" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="388" to="-400" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<pattern id="pm7" 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" begin=" " dur="3" fill="freeze">
</animate>
</rect>
<rect x="0" y="100" width="100" height="100" fill="black">
<animate attributename="fill" from="black" to="white" begin=" " dur="3" fill="freeze">
</animate>
</rect>
<rect x="100" y="100" width="100" height="100" fill="white">
</rect>
</pattern>
<mask id="mask7" x="0" y="0" width="602" height="800">
<rect x="0" y="0" width="602" height="800" style="fill:url(#pm7)">
</rect>
</mask>
<pattern id="pm8" width="50" height="50" patternunits="userSpaceOnUse">
<rect x="0" y="0" width="0" height="50" fill="white">
<animate attributename="width" from="0" to="50" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask8" x="0" y="0" width="602" height="800">
<rect x="0" y="0" width="602" height="800" style="fill:url(#pm8)">
</rect>
</mask>
<pattern id="pm9" width="50" height="50" patternunits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="0" fill="white">
<animate attributename="height" from="0" to="50" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask9" x="0" y="0" width="602" height="800">
<rect x="0" y="0" width="602" height="800" style="fill:url(#pm9)">
</rect>
</mask>
<pattern id="pm10" 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>
<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" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask10" x="0" y="0" width="602" height="800">
<rect x="0" y="0" width="602" height="800" style="fill:url(#pm10)">
</rect>
</mask>
<pattern id="pm11" 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>
<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" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask11" x="0" y="0" width="602" height="800">
<rect x="0" y="0" width="602" height="800" style="fill:url(#pm11)">
</rect>
</mask>
</defs>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0iaDgWQxkHvPvlLcTjFKFJNLB0G1bezEibgL5v22EicN6QzVUERRxKWNcw/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic0" attributename="opacity" from="0" to="1" begin="0;epic19.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic0" attributename="opacity" from="1" to="0" begin="bpic0.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0pw9K6ibRaW2WDxrpI7A9XUibD3b9XN7ic8lyCEp0PKq4mIjYzmy7C2Bug/640" opacity="0" x="0" y="0" width="602" height="800" 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+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0qVM1xDrKiafE9rOnoMuDJbmliaBeqHzT3X3PgRJ67uicibiaaDmT4AEbnsg/640" opacity="0" x="0" y="0" width="602" height="800" 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+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0c32k0iaVbejvjibZfc1W9icfOxv9UqiakYj8yBicoWZA5rpI7Cia6d5kuicAA/640" opacity="0" x="0" y="0" width="602" height="800" 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+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0s12c1YQbUCyB82555sdWSJ3D0X4Epvur1wk82dpwicv7sV2SfjE7mUA/640" opacity="0" x="0" y="0" width="602" height="800" 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+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0dU55R1nrOTMib6ic58COqU21bmISINNdzL99mtmQScSvIsDlO3PbpVsQ/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic5" attributename="opacity" from="0" to="1" begin="epic4.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic5" attributename="opacity" from="1" to="0" begin="bpic5.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0I5Qj2dGHlPCuujnj5icqev1Qic6hcTJo5bJW2CibLE08169NMtCgVnsmQ/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic6" attributename="opacity" from="0" to="1" begin="epic5.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic6" attributename="opacity" from="1" to="0" begin="bpic6.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0wDpNzYARC9tc0oVogPrr0DANDd7q4ljTWjNPUdicD91ibPesJgibC5ktw/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic7" attributename="opacity" from="0" to="1" begin="epic6.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic7" attributename="opacity" from="1" to="0" begin="bpic7.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI025iaefAUuIgjtta4nwH8jtmyodzT2lHR67rqO8oicmT8d5VqmbJpoZ5g/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic8" attributename="opacity" from="0" to="1" begin="epic7.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic8" attributename="opacity" from="1" to="0" begin="bpic8.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0OXPiadaOicFnPb41LmR1OCwQa9mThumTU6zhbRvKAXibBjYHQIricqTz0g/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic9" attributename="opacity" from="0" to="1" begin="epic8.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic9" attributename="opacity" from="1" to="0" begin="bpic9.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0zuibjt43NR1zgIXIaPsgdg7T9vMmVd8Vzj55fknNDwbpPeNpXBX7qrg/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic10" attributename="opacity" from="0" to="1" begin="epic9.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic10" attributename="opacity" from="1" to="0" begin="bpic10.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0m7fibqibZWJYhrhSTfjUGab2TPlhP2LibhQ1Bn089XYDpZC1gVBTEW6Og/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic11" attributename="opacity" from="0" to="1" begin="epic10.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic11" attributename="opacity" from="1" to="0" begin="bpic11.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0R4YWANzIJ0GFw8xIgiaqj9jcU6T5DXTl5niaiaaibUc5BM1K03T4wm5K1w/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic12" attributename="opacity" from="0" to="1" begin="epic11.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic12" attributename="opacity" from="1" to="0" begin="bpic12.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0pibgdmSflNRK0Ed3LSf3pETQrJT1jyl3cTsHGdAtoFzUrXl34HVJwUA/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic13" attributename="opacity" from="0" to="1" begin="epic12.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic13" attributename="opacity" from="1" to="0" begin="bpic13.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI08BtFf7gBVdp4wBMcXVY09dUysp6YRXic9PMQeTM7Ecq28CgFW3TXRuw/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic14" attributename="opacity" from="0" to="1" begin="epic13.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic14" attributename="opacity" from="1" to="0" begin="bpic14.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI01Y9S4LAvzpFktzwozj0dSusicyL3gicibibtQl04aP6tpWJsJyicPb6u1oQ/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic15" attributename="opacity" from="0" to="1" begin="epic14.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic15" attributename="opacity" from="1" to="0" begin="bpic15.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0FZrqXryytYicSSb0YYicsD9GicqhjhIohApdZjfDvV8GucA0VujY9ibFtA/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic16" attributename="opacity" from="0" to="1" begin="epic15.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic16" attributename="opacity" from="1" to="0" begin="bpic16.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI05j5nVXJ6icjPGqNib6Da59cWAPx5p5mqUOrib9lyyXIZJuq4RowMupMEg/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic17" attributename="opacity" from="0" to="1" begin="epic16.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic17" attributename="opacity" from="1" to="0" begin="bpic17.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0oqicbkkSTHmHZkIYfsLCVYWAmEjYg59ZNBkaJ2XnpLZaibBqJTpxcHHA/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic18" attributename="opacity" from="0" to="1" begin="epic17.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic18" attributename="opacity" from="1" to="0" begin="bpic18.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/58MYy3nfd7TTp8FicZg8HLhIazWNFXUI0CPl1zswLTW9KYibq2yVPqTmQOJBTVWibE15TZdxA8EmKNtqWF39S9bPw/640" opacity="0" x="0" y="0" width="602" height="800" preserveaspectratio="none">
<animate id="bpic19" attributename="opacity" from="0" to="1" begin="epic18.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic19" attributename="opacity" from="1" to="0" begin="bpic19.begin+8" dur="2" fill="freeze">
</animate>
</image>
</svg>
<div class="lrcShow" data-lrc="点击启动播放"></div>
<img src="https://n1.itc.cn/img8/wb/recom/2016/07/18/146881849555521267.GIF" style="width:200px;position:absolute; right:0px;top:750px;z-index:999;border-top-left-radius:32px;filter:blur(4px);" />
</div>
<script>
var bstrs = [];
var masks = document.getElementsByTagName("mask");
for(n = 0; n < masks.length; n++)        bstrs="";
var pts = document.getElementsByTagName("pattern");
console.log(masks.length, pts.length, masks.length - pts.length);
var dmp = masks.length - pts.length;

var imgs = document.getElementsByTagName('image');
for(n = 0; n < imgs.length; n++)        {
        let j = parseInt(Math.random() * masks.length);
        imgs.setAttribute('mask','url(#mask' + j + ')');
        bstrs += 'bpic' + n + '.begin;';
}
for(n = 0; n < dmp; n++)        {
        aniObjs = masks.getElementsByTagName("animate");
        for(let j = 0; j < aniObjs.length; j++)        aniObjs.setAttribute('begin', bstrs);
}
for(n = dmp; n < masks.length; n++)        {
        aniObjs = pts.getElementsByTagName("animate");
        for(let 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.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.querySelector('.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(/:/);_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,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;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}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.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}

var lrctxt = `
歌手：黑鸭子\n 所属专辑：听佛\n观音菩萨在心中\n她叫我善待众生\n做人要不贪不厌\n常做善事心安宁\n啊观世音菩萨\n大慈大悲普渡众生\n
大慈大悲保佑你\n她叫我善待人生\n做人要不悔不倦\n
`;
//       
var opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=358173.mp3",
}
new lrcPlayerY(opts);

</script>

岁月·如歌 发表于 2024-2-27 19:15

南无阿弥陀佛！

老谟深虑 发表于 2024-2-27 19:20

          欣赏老师的精美音画，点赞！同步歌词的音频颜色太轻，有点看不清楚。

樵歌 发表于 2024-2-27 19:30

菩萨宝相庄严！

起个网名好难 发表于 2024-2-27 20:07

岁月·如歌 发表于 2024-2-27 19:15
南无阿弥陀佛！

https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1969658213,440323045&fm=253&gp=0.jpg

起个网名好难 发表于 2024-2-27 20:10

老谟深虑 发表于 2024-2-27 19:20
欣赏老师的精美音画，点赞！同步歌词的音频颜色太轻，有点看不清楚。

https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1969658213,440323045&fm=253&gp=0.jpg

感谢您的建议。

起个网名好难 发表于 2024-2-27 20:11

樵歌 发表于 2024-2-27 19:30
菩萨宝相庄严！

https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1969658213,440323045&fm=253&gp=0.jpg

红影 发表于 2024-2-27 21:10

这么多观音菩萨的图图，南无阿弥陀佛{:5_161:}

红影 发表于 2024-2-27 21:11

欣赏难难好帖{:4_187:}

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

红影 发表于 2024-2-27 21:10
这么多观音菩萨的图图，南无阿弥陀佛

https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1969658213,440323045&fm=253&gp=0.jpg

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

红影 发表于 2024-2-27 21:11
欣赏难难好帖

这帖画面切换方式是随机生成的，刷新页面就会改变。

绿叶清舟 发表于 2024-2-27 21:33

这么多观音图片，欣赏网名漂亮的制作

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

绿叶清舟 发表于 2024-2-27 21:33
这么多观音图片，欣赏网名漂亮的制作

https://5b0988e595225.cdn.sohucs.com/images/20200213/c0f18f63d3664533b6dc51b7f95718b3.gif

红影 发表于 2024-2-27 22:37

起个网名好难 发表于 2024-2-27 21:25
这帖画面切换方式是随机生成的，刷新页面就会改变。

嗯嗯，去试了一下，果然是这样呢{:4_187:}

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

红影 发表于 2024-2-27 22:37
嗯嗯，去试了一下，果然是这样呢

https://5b0988e595225.cdn.sohucs.com/images/20200216/b51438c7e583467f98adbc3d30b39180.gif

流水光阴 发表于 2024-2-28 13:09


南无阿弥陀佛！

流水光阴 发表于 2024-2-28 13:10

这种菩萨的图片第一次看见

流水光阴 发表于 2024-2-28 13:10

感谢楼主佳作分享

起个网名好难 发表于 2024-2-28 14:58

流水光阴 发表于 2024-2-28 13:10
感谢楼主佳作分享

https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2813140781,390165802&fm=253&gp=0.jpg

红影 发表于 2024-2-28 16:36

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


问好难难，致春安{:4_187:}
页: [1] 2
查看完整版本: 观世音菩萨