母亲节的歌
本帖最后由 起个网名好难 于 2023-5-14 09:23 编辑 <br /><br /><style>#outBlk {
width:900px;height:1114px;overflow:hidden;display:grid;place-items:center;position:relative;
background:url(https://up.36992.com/pic/bf/b2/12/bfb212be834dec4909042de18c4116cd.jpg) no-repeat center/cover;
box-shadow: 4px 4px 8px black;overflow:hidden;border-radius:5%;margin:100px 0 32px -60px;
}
.lrcShow{font:bold 3em 楷体;position:absolute;bottom:10px;height:auto;left:20%;color:lightgray;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;--lrcTxt:'click to play';}
.lrcShow::before{position:absolute;content:var(--lrcTxt);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 {left:5%;top:50px;writing-mode: vertical-rl;}
.lrcShow::before {writing-mode: vertical-rl;}
@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
</style>
<div id="outBlk">
<css-doodle id="floatFlower">
:doodle {
@size: 900px 1114px;
@grid: 50x1;
margin: -100% 0%;
--aniPlayState:paused;
}
:container { perspective: 10vmin; }
pointer-events: auto;
background: @m(@r(120, 120),radial-gradient( @p(#ff0000,#00ff00,#fff000,#ffffff) 6%, transparent 20% ) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);
@size: 50%;
@place-cell: center;
border-radius: 50%;
transform-style: preserve-3d;
animation: scale-up 15s linear infinite var(--aniPlayState);
animation-delay: calc(@i * -.6s);
@keyframes scale-up {
0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
10% { opacity: 1; }
95% { transform: translate3d(0, 0, @r(50vmin, 85vmin)) rotate(@r(-360deg, 360deg)); }
100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }
</css-doodle>
<div class="lrcShow" >click to play</div>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(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;}('K M=o(){u 4.O.1g(4,1h)};M.1i={1d:M,O:o(H){y=H.x.J(/(^\\s*)|(\\s*$)/g,\'\');4.6=P.1f(\'.1m\');4.7=4.T(y);4.N(H.1o)},T:o(y){K p=y.J(/(^\\s*)|(\\s*$)/g,"").R(/\\r|\\n|\\r\\n/);K 9=1k 1l();D(V l=0;l<p.i;l++){V w=p.15(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);j(w){F=p.13(\']\');j(F>0)x=p.Q(F+1);D(m=0;m<w.i;m++){L=w.Q(1).J(\']\',\'\').R(/:/);z=(+L)*17+(+L);j(9.i==0&&z!=0){9.S({f:0,v:\'\\1p\\U\\U\\1I\\1J\\1E\\1D\'})}9.S({f:+z.B(2),v:x})}}}9.1F(o(a,b){u(a.f-b.f)});D(k=0;k<9.i-1;k++){9.G=+(9.f-9.f).B(2)}u 9},W:o(A){4.6.1t=4.7.v;4.6.c.e(\'--x\',\'"\'+4.7.v+\'"\');4.6.c.e(\'--1q\',\'1r\'+(4.8%2));4.6.c.e(\'--A\',A+\'s\');4.6.c.e(\'--t\',\'C\');4.8++},N:o(Y){4.5=P.1A("11");4.5.1B=E;4.5.1C=E;4.5.1x=1y;4.5.1z=Y;4.6.1w(4.5);4.8=0;4.5.h(\'1s\',()=>{4.8=0;4.5.q()});4.5.h(\'1v\',()=>{4.7.G=+(4.5.1u-4.7.f).B(2)});4.5.h(\'q\',()=>{4.6.c.e(\'--t\',\'C\');Z.c.e(\'--t\',\'C\')});4.5.h(\'10\',()=>{j(4.8==1&&4.5.X<1){4.5.q();u E}4.6.c.e(\'--t\',\'I\');Z.c.e(\'--t\',\'I\')});4.5.h(\'1G\',()=>{1H.18("11 16, 1b q 1a 19");4.6.c.12=\'14\';4.6.1c(4)});4.5.h(\'1j\',()=>{j(4.8<4.7.i){j(4.5.X>=4.7.f){4.W(4.7.G)}}});4.6.h(\'1n\',()=>{j(4.5.I){4.5.q()}1e{4.5.10()}})}}',62,108,'||||this|mObj|lrcShowObj|lrcVec|idx|lrcs|||style||setProperty|seconds||addEventListener|length|if||index|||function|parts|play|||aniPlayState|return|words|chkTime|lrcTxt|lyricTxt|_0|durTime|toFixed|running|for|false|tIdx|dur|opts|paused|replace|var|ta|lrcPlayerY|genPlayer|init|document|substr|split|push|handleLrc|u0020|let|showLrc|currentTime|mUrl|floatFlower|pause|audio|display|lastIndexOf|none|match|wrong|60|log|event|start|remove|removeChild|constructor|else|querySelector|apply|arguments|prototype|timeupdate|new|Array|lrcShow|click|audioURL|u00A9|aniName|bgMove|ended|innerHTML|duration|canplay|appendChild|autoplay|true|src|createElement|loop|muted|u8f7b|u5e74|sort|error|console|u4e5f|u66fe'.split('|'),0,{}))
var lrctxt = `
作词 : 牧羊可可西里\n 作曲 : 才仁巴桑\n写您的名字\n总是被泪水打湿\n这二十年来\n在我的世界里您从没有走远\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=1447113182.mp3",
}
new lrcPlayerY(opts);
})();
</script>
借“网名”朋友美帖，祝天下妈妈们节日快乐！ 这个制作很漂亮，又很温暖。欣赏难难好帖。借帖祝大家母亲节快乐{:4_199:} 这个帖子真好！听后沉浸在母爱的圣洁光辉里！谢谢您1{:4_190:} 欣赏好帖 梦油 发表于 2023-5-14 09:59
借“网名”朋友美帖，祝天下妈妈们节日快乐！
谢谢支持与欣赏，上午好！ 红影 发表于 2023-5-14 10:00
这个制作很漂亮，又很温暖。欣赏难难好帖。借帖祝大家母亲节快乐
谢谢支持与欣赏，上午好！ 樵歌 发表于 2023-5-14 10:24
这个帖子真好！听后沉浸在母爱的圣洁光辉里！谢谢您1
谢谢支持与欣赏，上午好！ 马黑黑 发表于 2023-5-14 10:34
欣赏好帖
谢谢支持与欣赏，上午好！ 起个网名好难 发表于 2023-5-14 10:57
谢谢支持与欣赏，上午好！
{:4_191:} 马黑黑 发表于 2023-5-14 10:57
{:4_176:} 难难制作漂亮的{:4_199:} 小辣椒 发表于 2023-5-14 11:14
难难制作漂亮的
谢谢支持与欣赏，上午好！ 醉美水芙蓉 发表于 2023-5-14 11:19
欣赏老师佳作！
谢谢支持与欣赏，上午好！ 借贴祝福天下所有的母亲节日快乐 罗浮梦 发表于 2023-5-14 11:22
借贴祝福天下所有的母亲节日快乐
谢谢支持与欣赏，上午好！ 起个网名好难 发表于 2023-5-14 10:56
谢谢支持与欣赏，上午好！
问好难难，谢谢你的好帖和美好祝福{:4_187:} 红影 发表于 2023-5-14 11:59
问好难难，谢谢你的好帖和美好祝福
中午好！
只算是个应景帖。 起个网名好难 发表于 2023-5-14 12:02
中午好！
只算是个应景帖。
这个应景很及时很美好的啊{:4_187:}
页:
[1]
2