巾帼英雄 --- 女神节快乐！
每当鼠标移动到画面上切换画面<style>
.lrcShow{font:bold 40px 楷体;position:absolute;bottom:10px;left:10%;color:hsl(240,100%,75%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;--fc:darkred;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:var(--fc);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%;}}
#oBlk {
width:587px;height:860px;position:relative;
background:url() no-repeat center / cover;
margin:auto;transition: all 1.5s;
overflow:hidden; border-radius:24px;
box-shadow:4px 4px 8px black;
}
<style>
.lrcShow{font:bold 32px 楷体;position:absolute;bottom:10px;left:10%;color:hsl(240,100%,75%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;--fc:darkred;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:var(--fc);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%;}}
#oBlk {
width:587px;height:860px;position:relative;
background:tan url(https://s3.bmp.ovh/imgs/2023/03/06/fc3f705c3e33d479.jpg) no-repeat center / cover;
margin:auto;transition:all 2.5s;
overflow:hidden; border-radius:24px;
box-shadow:4px 4px 8px black;
}
</style>
<div id="oBlk"><div class="lrcShow" data-lrc="点击启动播放"></div></div>
<script>
let pics = [
"https://s3.bmp.ovh/imgs/2023/03/06/fc3f705c3e33d479.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/f4c3a37c7774913d.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/69f73acc6a015937.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/4f70aad872485612.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/b7a255e6b774f56d.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/5a1c1e5a70092075.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/b7718b2ba7a1e6f6.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/0d85b8db44074ff3.jpg",
"https://s3.bmp.ovh/imgs/2023/03/06/9825546b65f49f48.jpg",
];
let idx = 0;
let oBlk = document.querySelector('#oBlk');
oBlk.addEventListener('mouseover', function () {
idx++; idx %= pics.length;
oBlk.style.backgroundImage = 'url(' + pics + ')';
});
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;}('t y=7(){w 4.T.1d(4,1f)};y.1r={1i:y,T:7(C){x=C.A.J(/(^\\s*)|(\\s*$)/g,\'\');4.8=O.1k(\'.1l\');4.e=4.Q(x);4.P(C.1g)},Q:7(x){t p=x.J(/(^\\s*)|(\\s*$)/g,"").V(/\\r|\\n|\\r\\n/);t 9=1p 1q();F(M l=0;l<p.j;l++){M v=p.1m(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);i(v){H=p.1n(\']\');i(H>0)A=p.U(H+1);F(m=0;m<v.j;m++){L=v.U(1).J(\']\',\'\').V(/:/);B=(+L)*1e+(+L);i(9.j==0&&B!=0){9.S({f:0,G:\'\\1a\\R\\R\\1K\\1L\\1J\\1F\'})}9.S({f:+B.D(2),G:A})}}}9.1H(7(a,b){w(a.f-b.f)});F(k=0;k<9.j-1;k++){9.K=+(9.f-9.f).D(2)}10.Z(9);w 9},X:7(E){4.8.1G=4.8.1M.1v=4.e.G;4.8.o.u(\'--1w\',\'1x\'+(4.c%2));4.8.o.u(\'--E\',E+\'s\');4.8.o.u(\'--I\',\'11\');4.c++},P:7(N){4.6=O.1u("12");4.6.1y=z;4.6.1C=z;4.6.1D=1E;4.6.1z=N;4.8.1B(4.6);t 5=4;t 1b=0;4.c=0;4.6.h(\'1A\',7(){5.c=0;4.q()});4.6.h(\'1t\',7(){5.e.K=+(4.1s-5.e.f).D(2);});4.6.h(\'q\',7(){5.8.o.u(\'--I\',\'11\')});4.6.h(\'13\',7(){i(5.c==1&&4.W<1){5.6.q();w z}5.8.o.u(\'--I\',\'Y\')});4.6.h(\'1I\',7(){10.Z("12 1c, 19 q 15 14");5.8.o.17=\'16\';5.8.18(4)});4.6.h(\'1o\',7(){i(5.c<5.e.j){i(4.W>=5.e.f){5.X(5.e.K)}}});4.8.h(\'1h\',7(){i(5.6.Y){5.6.q()}1j{5.6.13()}})}}',62,111,'||||this|that|mObj|function|lrcShowObj|lrcs|||idx||lrcVec|seconds||addEventListener|if|length||index|||style|parts|play|||var|setProperty|chkTime|return|lyricTxt|lrcPlayerY|false|lrcTxt|_0|opts|toFixed|durTime|for|words|tIdx|aniPlayState|replace|dur|ta|let|mUrl|document|genPlayer|handleLrc|u0020|push|init|substr|split|currentTime|showLrc|paused|log|console|running|audio|pause|event|start|none|display|removeChild|remove|u00A9|turn|wrong|apply|60|arguments|audioURL|click|constructor|else|querySelector|lrcShow|match|lastIndexOf|timeupdate|new|Array|prototype|duration|canplay|createElement|lrc|aniName|bgMove|loop|src|ended|appendChild|muted|autoplay|true|u8f7b|innerHTML|sort|error|u5e74|u4e5f|u66fe|dataset'.split('|'),0,{}))
var lrctxt = `
作词 : 黄沾
作曲 : 顾嘉辉
身虽女儿身
心是壮士心
巾帼英雄
肝胆胜须眉汉
敢于去肩承重任
柔中刚
当那眼泪如醇酒吞
强哉娇
未怕苦雨寒霜侵
莫问爱莫问情
过去不再寻
让慧剑
挥开我心里遗憾
独自去独自来
笑说风里事
绝未吐旧日悲音
不枉女儿身
光辉磊落心
巾帼襟怀
有冲天干云志
一身去担承责任
千秋也留下我清音
莫问爱莫问情
过去不再寻
让慧剑
挥开我心里遗憾
独自去独自来
笑说风里事
绝未吐旧日悲音
不枉女儿身
光辉磊落心
巾帼襟怀
有冲天干云志
一身去担承责任
千秋也留下我清音`;
var opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=439100198.mp3",
}
new lrcPlayerY(opts);
</script>
这个特别有意义，把上下几千年的女英雄都歌颂了。{:4_199:} 也知道音画精品是啥颜色，先加了再说 樵歌 发表于 2023-3-7 10:18
这个特别有意义，把上下几千年的女英雄都歌颂了。
谢谢支持与欣赏
上午好！ 樵歌 发表于 2023-3-7 10:20
也知道音画精品是啥颜色，先加了再说
感谢加精支持 醉美水芙蓉 发表于 2023-3-7 11:51
欣赏老师佳作！
感谢支持与鼓励
http://pic.bbs.ybvv.com/forum/201810/23/121738j3ctlglaxixlxatk.gif
起个网名好难 发表于 2023-3-7 10:38
谢谢支持与欣赏
上午好！
不必客气嘛{:4_190:} 难难·~巾帼美女太美了，还配了粤语歌，太好听了{:4_178:} 樵歌 发表于 2023-3-7 10:20
也知道音画精品是啥颜色，先加了再说
樵哥哥，庆节日红高亮，我给你修改了{:4_173:} 难难的这些代码制作小辣椒也是特别的喜欢{:4_187:} 谢谢精彩分享{:4_187:} https://pic.imgdb.cn/item/6222ab235baa1a80abfb3edc 小辣椒 发表于 2023-3-7 13:08
难难·~巾帼美女太美了，还配了粤语歌，太好听了
谢谢支持与欣赏
https://m.yh31.com/tp/Photo1/ZWWH/20087/zwwh3.gif 庶民 发表于 2023-3-7 14:11
好漂亮的扇子
谢谢支持与欣赏
https://m.yh31.com/tp/Photo1/ZWWH/20087/zwwh3.gif 这么多的女英雄，每一个说起来都是史上赫赫有名。这个制作太好了，很适合女神节的氛围，大赞{:4_199:} 小辣椒 发表于 2023-3-7 13:10
樵哥哥，庆节日红高亮，我给你修改了
谢谢了，祝俺们可爱小辣椒节日快乐{:4_187:} 欣赏佳作。顺便借帖祝女王们意气风发管好老公！{:4_170:} 马黑黑 发表于 2023-3-7 19:15
欣赏佳作。顺便借帖祝女王们意气风发管好老公！
感谢关注与支持
http://5b0988e595225.cdn.sohucs.com/images/20170927/86b36b0f09c94cad8524adfd453051d0.gif 红影 发表于 2023-3-7 16:46
这么多的女英雄，每一个说起来都是史上赫赫有名。这个制作太好了，很适合女神节的氛围，大赞
谢谢关注与支持
http://5b0988e595225.cdn.sohucs.com/images/20170927/86b36b0f09c94cad8524adfd453051d0.gif
页:
[1]
2