起个网名好难 发表于 2024-5-12 11:28

感恩母亲节，送给天下母亲！


<meta name="referrer" content="never" />
<style>
#oBlk        {width:640px;height:800px;position:relative; margin:auto;overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#picHolder        {width:6400px;height:800px;position:absolute;left:0px;top:0px;animation: mleft 100s steps(10) infinite;}
.pic        {width:640px;height:800px;float:left;}
@keyframes mleft {
    to {
      left: calc(-10 * 640px);
    }
}

.lrcShow {
font: normal 32px sans-serif;
position: absolute;
width: 80%;
height: 2em;
top: 3%;
left: 10%;
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;
    background-clip: text;
}
.lrcShow::before {
position: absolute;
content: attr(data-lrc);
width: 0;
height: 100%;
left: 0;
top: 0;
color: transparent;
color: darkred;
background-image: url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);
-webkit-background-clip: text;
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%;
}
}

#bfctl {
bottom: 2%;
right: 2%;
position: absolute;
overflow: hidden;
width: 120px;
height: 120px;
cursor: pointer;
}

#disc {
position: absolute;
top: 0px;
left: 0px;
width: 80%;
height: 80%;
border-radius: 50%;
border: 2px solid #000;
background: url("https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png")
      center/cover no-repeat,
    url("https://img1.kuwo.cn/star/albumcover/300/43/24/4016986247.jpg")
      no-repeat center / 50%;
animation: spin 10s infinite linear;
}

@keyframes spin {
100% {
    transform: rotate(360deg);
}
}

#pickupArm {
position: absolute;
top: 1%;
right: 0.5%;
width: 40px;
height: 95px;
background: url("https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png")
    no-repeat 0px 0px / 100%;
}

.bfpause {
transform-origin: 100% 0%;
transform: rotate(-16deg);
}

#indicator {
position: absolute;
left: 20%;
bottom: 10px;
width: 60%;
margin: 10px auto;
appearance: none;
height: 8px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}

#indicator::-webkit-progress-bar {
background: pink;
}

#indicator::-webkit-progress-value {
background: hsl(125, 72%, 72%);
}

.lrcShow::before {
color: transparent;
    background:url('https://img95.699pic.com/xsj/1r/uu/zw.jpg') center/cover;
    -webkit-background-clip: text;
    background-clip: text;
}

</style>

<div id="oBlk">
        <div id="picHolder">
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYC9icrs3LYiaXiaicOoDDzXicezsF6KMT7YtMXxXvvLfzN81iakzKEzk8qgsVQ/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYCdSHxJKL2nYxFr9qZURMMjb7dtxicc922icz2JVdbefdjLCvront3sjkA/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYCds7f61LxJuBdVMrRKbSpJtiaicaGZZiaqiaCfV990OWyI01jrZic2etu2Aw/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYCC2qTHSJUnemGGsXHAMEicnU8ticric7Bib2et5BOflhBhaicjNxOvIvaR7Q/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYCicTjJSyCRf6gjCpExs7RpAGILSrNot8NH8coQ1ZYp8aRzOj3ZzLh0DQ/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYCiaKPPuIxqpLmyLLU7qMXbrLA1ict0icoHEkkGRpIGlo8S1QYlEicAqMbvA/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYCcbwhBicChJnGvjFA7wm6F5ZSvjtsyVg0H44kxmvINZoCUPchjP0ESBQ/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYC2gqt6fP5ianE2OUQSEQ5ibxTccAcgA8AZ9DU0dMI1pqkMX7nVflibobsA/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/5KBiaPdLYf8c3AG42QfHiaQFu4okgR0npFTZr9669azxktaDp8m7ucRmqvEaHB2VibOib60sZ5M5GgQicFgvEdM9ThA/640" />
                <img class='pic' src="https://mmbiz.qpic.cn/mmbiz_gif/o6TEh8Wdwc4u21rOAIfJpxhFnJmMeeYCK9OcopnNaAfkcVa7ZX8ia479NK9DticiagD4lBicibpblA0JGEicDccIpjWQ/640" />
        </div>
        <div id="bfctl">
        <div id="disc"></div>
        <div id="pickupArm"></div>
        </div>
        <div class="lrcShow" data-lrc=""></div>
        <progress value='0.0' max='100.0' id='indicator'></progress>
</div>

<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('M H=l(){w 4.Q.1i(4,1j)};H.1k={1f:H,Q:l(v){x=v.B.K(/(^\\s*)|(\\s*$)/g,\'\');4.6=O.1h(\'.1l\');4.u=v.u;4.9=4.R(x);4.P(v.1p)},R:l(x){M o=x.K(/(^\\s*)|(\\s*$)/g,"").S(/\\r|\\n|\\r\\n/);M 7=1m 1n();y(W j=0;j<o.f;j++){W t=o.1o(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);e(t){G=o.15(\']\');e(G>0)B=o.U(G+1);y(m=0;m<t.f;m++){L=t.U(1).K(\']\',\'\').S(/:/);A=(+L)*18+(+L);e(7.f==0&&A!=0){7.T({c:0,C:\'\\1a\\V\\V\\1L\\1M\\1N\\1K\'})}7.T({c:+A.z(2),C:B})}}}7.1I(l(a,b){w(a.c-b.c)});y(k=0;k<7.f-1;k++){7.I=+(7.c-7.c).z(2)}w 7},Z:l(D){4.6.1w=4.6.1x.1y=4.9.C;4.6.i.p(\'--1v\',\'1s\'+(4.8%2));4.6.i.p(\'--D\',D+\'s\');4.6.i.p(\'--E\',\'10\');4.8++},P:l(N){4.5=O.1D("X");4.5.1E=F;4.5.1F=F;4.5.1C=1z;4.5.1A=N;4.6.1B(4.5);4.8=0;4.5.h(\'1u\',()=>{4.8=0;4.5.q()});4.5.h(\'1t\',()=>{4.9.I=+(4.5.11-4.9.c).z(2)});4.5.h(\'q\',()=>{4.6.i.p(\'--E\',\'10\')});4.5.h(\'Y\',()=>{e(4.8==1&&4.5.J<1){4.5.q();w F}4.6.i.p(\'--E\',\'12\')});4.5.h(\'1H\',()=>{1J.1G("X 1d, 19 q 1b 1e");4.6.i.1c=\'17\';4.6.13(4)});4.5.h(\'16\',()=>{e(4.u){4.u.14=4.5.J/4.5.11*1r}e(4.8<4.9.f){e(4.5.J>=4.9.c){4.Z(4.9.I)}}});4.6.h(\'1q\',()=>{e(4.5.12){4.5.q()}1g{4.5.Y()}})}}',62,112,'||||this|mObj|lrcShowObj|lrcs|idx|lrcVec|||seconds||if|length||addEventListener|style|index||function|||parts|setProperty|play|||chkTime|indicator|opts|return|lyricTxt|for|toFixed|_0|lrcTxt|words|durTime|aniPlayState|false|tIdx|lrcPlayerY|dur|currentTime|replace|ta|var|mUrl|document|genPlayer|init|handleLrc|split|push|substr|u0020|let|audio|pause|showLrc|running|duration|paused|removeChild|value|lastIndexOf|timeupdate|none|60|remove|u00A9|start|display|wrong|event|constructor|else|querySelector|apply|arguments|prototype|lrcShow|new|Array|match|audioURL|click|100|bgMove|canplay|ended|aniName|innerHTML|dataset|lrc|true|src|appendChild|autoplay|createElement|loop|muted|log|error|sort|console|u8f7b|u4e5f|u66fe|u5e74'.split('|'),0,{}))
{
    let lrctxt = `
唱给母亲的歌 - 陈庆
词：陈庆
曲：陈庆
编曲：胡昌龙
有一种爱 渗透我的身体
有一种情 厚重的无比彻底
她爱我胜过爱自己
就算分离也没有距离
我亲爱的母亲
有一种爱 绝对不用怀疑
有一种情 足以感动天地
她也许不在乎自己
我却胜过了她的生命
我亲爱的母亲
生命里逃不过的打击
生活里躲不过的委屈
你告诉我咬紧牙关 继续前行
学会不放弃
岁月中走过你的美丽
风雨中听见你的哭泣
你告诉我哭过以后继续前行
这就是命运
有一种爱绝对不用怀疑
有一种情足以感动天地
她也许不在乎自己
我们却胜过她的生命
我亲爱的母亲
生命里逃不过的打击
生活里躲不过的委屈
你告诉我咬紧牙关 继续前行
学会不放弃
岁月中走过你的美丽
风雨中听见你的哭泣
你告诉我哭过以后继续前行
这就是命运
哦 这就是命运
哦
生命里逃不过的打击
生活里躲不过的委屈
你告诉我咬紧牙关 继续前行
学会不放弃
岁月中走过你的美丽
风雨中听见你的哭泣
你告诉我哭过以后继续前行
这就是命运
妈妈 我爱你
`;
    //       
    let opts = {
      lrcTxt: lrctxt,
      audioURL: "https://music.163.com/song/media/outer/url?id=1295310014.mp3", //
    }
    let playerY = new lrcPlayerY(opts);
    bfctl.onclick = () => {
      playerY.mObj.paused ? (playerY.mObj.play(), pickupArm.classList.remove('bfpause'), disc.style.animationPlayState = 'running') : (playerY.mObj.pause(), pickupArm.classList.add('bfpause'), disc.style.animationPlayState = 'paused', aniObj.pause());
    }
    playerY.mObj.addEventListener('timeupdate', function() {
      if (indicator) {
      indicator.value = this.currentTime / this.duration * 100;
      }
    });
}
</script>

愤怒的葡萄 发表于 2024-5-12 11:30

祝天下的母亲节日快乐！~~~

红影 发表于 2024-5-12 14:44

今天母亲节，这么美好的帖子送给这个节日真好。{:4_187:}

红影 发表于 2024-5-12 14:44

欣赏难难好帖，借帖同祝天下母亲节日快乐{:4_187:}

起个网名好难 发表于 2024-5-12 16:10

愤怒的葡萄 发表于 2024-5-12 11:30
祝天下的母亲节日快乐！~~~

https://up.36992.com/pic/ca/b8/d0/cab8d0d52d29394c860437252b6d70d0.jpg

起个网名好难 发表于 2024-5-12 16:10

红影 发表于 2024-5-12 14:44
今天母亲节，这么美好的帖子送给这个节日真好。

https://up.36992.com/pic/ca/b8/d0/cab8d0d52d29394c860437252b6d70d0.jpg

老谟深虑 发表于 2024-5-12 16:21

          祝天下的母亲节日快乐！

起个网名好难 发表于 2024-5-12 16:47

老谟深虑 发表于 2024-5-12 16:21
祝天下的母亲节日快乐！


https://up.36992.com/pic/ca/b8/d0/cab8d0d52d29394c860437252b6d70d0.jpg

马黑黑 发表于 2024-5-12 18:31

母亲节（Mother's Day），是一个感谢母亲的节日。现代的母亲节起源于美国，是每年5月的第二个星期日。母亲们在这一天通常会收到礼物，康乃馨被视为献给母亲的花，而中国的母亲花是萱草花，又叫忘忧草。

起个网名好难 发表于 2024-5-12 18:38

本帖最后由 起个网名好难 于 2024-5-12 18:42 编辑

马黑黑 发表于 2024-5-12 18:31
母亲节（Mother's Day），是一个感谢母亲的节日。现代的母亲节起源于美国，是每年5月的第二个星期日。母亲 ...
谢谢告知。

一直对这样一些洋节没什么概念， 半个世纪前在农村就认识了黄花菜而现在才知道它又称作萱草花。{:5_102:}

红影 发表于 2024-5-12 19:22

起个网名好难 发表于 2024-5-12 16:10


好美的图图，谢谢难难{:4_187:}

马黑黑 发表于 2024-5-12 19:22

起个网名好难 发表于 2024-5-12 18:38
谢谢告知。

一直对这样一些洋节没什么概念， 半个世纪前在农村就认识了黄花菜而现在才知道它又称作萱 ...

{:4_172:}

起个网名好难 发表于 2024-5-12 19:37

红影 发表于 2024-5-12 19:22
好美的图图，谢谢难难

https://5b0988e595225.cdn.sohucs.com/images/20181011/751af9a04b924647a7baeb97f0f28ab6.gif

起个网名好难 发表于 2024-5-12 19:38

马黑黑 发表于 2024-5-12 19:22


以前只当是经济作物，现在成了一种圣洁的象征。

马黑黑 发表于 2024-5-12 20:18

起个网名好难 发表于 2024-5-12 19:38
以前只当是经济作物，现在成了一种圣洁的象征。

都是有价值的

起个网名好难 发表于 2024-5-12 21:08

马黑黑 发表于 2024-5-12 20:18
都是有价值的

倒也是，只是价值的大小不同。

马黑黑 发表于 2024-5-12 22:14

起个网名好难 发表于 2024-5-12 21:08
倒也是，只是价值的大小不同。
价值其实不论大小，除非过于势利

红影 发表于 2024-5-12 22:28

起个网名好难 发表于 2024-5-12 19:37


问好难难，晚上好{:4_187:}

起个网名好难 发表于 2024-5-13 06:29

马黑黑 发表于 2024-5-12 22:14
价值其实不论大小，除非过于势利

事实存在的差别，以前是物质层面的现在是精神层面的。

https://5b0988e595225.cdn.sohucs.com/images/20180205/116dacaa75df40fb8908f85e5880e315.gif

起个网名好难 发表于 2024-5-13 06:29

红影 发表于 2024-5-12 22:28
问好难难，晚上好

https://5b0988e595225.cdn.sohucs.com/images/20180205/116dacaa75df40fb8908f85e5880e315.gif
页: [1] 2
查看完整版本: 感恩母亲节，送给天下母亲！