起个网名好难 发表于 2023-5-21 20:06

小满

本帖最后由 起个网名好难 于 2024-1-12 12:37 编辑 <br /><br /><style>
.lrcShow{font:bold 2vmax 楷体;position:absolute;bottom:10px;height:auto;left:15%;color:lightgray;--aniPlayState:paused;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;cursor:pointer;--lrcTxt:点击启动播放}
.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%;}}       
#picHold div        {width:600px;height:957px;margin-bottom:4px;background-color:skyblue;float:left;}
.lrcShow::before{color:transparent;background-image:linear-gradient(0deg,hsl(180,100%,30%),hsl(240,100%,50%));}
#outB {
      margin: 50px auto;
      width: 40vmax;
                height:56vmax;
      background-position: 0 0;
      cursor: pointer;
                overflow:hidden;
                position:relative;
                border-radius:24px;
                box-shadow:4px 4px 10px black;
               
}
.rollPic                {width:40vmax;height:56vmax;float:left;background-repeat:no-repeat;background-position:center;background-size:cover;}
#dlBlk        {
        width:720vmax;height:56vmax;
        position:absolute;left:0px;top:0px;
        animation: hello 75s steps(18) infinite;
}
#dlBlk:hover        {animation-play-state:paused;}
@keyframes hello { to { left:-720vmax; } }
</style>
<div id="outB">
<div id="dlBlk" >
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/9235aff6868f82c7.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/f29789fab147522a.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/a412e33848f2589d.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/d13302f842287c6d.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/f5fe17bcf0e6ff60.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/5cd836c3e9f5d853.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/863979b0276d7fe7.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/9271fdf0b5aeb241.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/e1095792debe2b2e.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/52a94af380b705b6.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/0880c85f57b1d8f8.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/5c8682b516fe58f9.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/bcfe8323fb232cf7.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/3a3d8bb35b72e62e.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/1012b663ad94d475.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/88cf9e6d4a6c53e1.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/dbd715931990bcfd.jpg)" ></div>
<div class="rollPic" style="background-image:url(https://s3.bmp.ovh/imgs/2023/05/21/2f31ffe6f9715a8d.jpg)" ></div>

</div>
        <css-doodle id="floatFlower">
               :doodle {
                        @size: 40vmax 56vmax;
                        @grid: 6;
                        position:absolute; left:0px; top:0px;
                        --aniPlayState:paused;
                }   
                :container {      perspective: 10vmin;    }
               
                pointer-events: auto;   
                background: @m(@r(120, 120),radial-gradient( @p(red,green,#fff000,white) 6%, transparent 20%) no-repeat @r(100%) @r(100%) / @r(1%, 3%) @lr);   
                @place-cell: center;   
                border-radius: 50%;   
                transform-style: preserve-3d;   
                animation: scale-up 30s 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">点击启动播放</div>
</div>
<!-- script type="text/javascript" src="lrcPlayerSs.js"></script -->

<script>
        let script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.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 = `
作曲 : 殇小谨
编曲：王柏鸿

卷起木香藏在枕后
和他束发的青柳
白桐占三分余春坠入手

一晌长梦压碎红豆
是明月醉倚高楼
遮住黄昏的夜却遮不住愁

情深未必白头
传奇才不朽
相识未必 拥有 莫强求

一杆铁画银钩
落处却温柔
说动笔的人 动情总难收

是鱼跃莲池
惊起一尾
波浪唯你知
是江山万里我唯与你相识
抚摸书页时
眼泪却都
不忍去打湿
我写遍这世间的每种相思

执着天长地久太久
到满月多了缺口
是放下曾经却放不开手

被墨渍沾上了衣袖
和痴人忘情的酒
写良辰多聚首莫待人消瘦

情深未必白头
传奇才不朽
相识未必 拥有 莫强求

一杆铁画银钩
落处却温柔
说动笔的人 动情总难收

是鱼跃莲池
惊起一尾
波浪唯你知
是江山万里我唯与你相识
抚摸书页时
眼泪却都
不忍去打湿
我写遍这世间的每种相思

要情到浓时才懂奢侈
似佛手拈花点到即止
要割舍执念般的仁慈
埋下红尘的种子~~~

要穿风过雨衔云而至
似飞鸟池鱼般配景致
要想过念过停留唇齿
最终唯有清风知~~~

混音：殇小谨
母带处理：殇小谨
和声：皎月
和声编写：皎月
文案：偏生梓归
封面设计：春吾
古筝：紫格
古筝编写：紫格、王柏鸿
小提琴：大琴KoTo
小提琴编写：大琴KoTo
唢呐：晴时瞑
制作人：殇小谨
录音室：Hi Music Studio
混音室：Hi Music Studio
监制：李俊羽
出品：音阙诗听
`;
var opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=1366551442.mp3",
}
new lrcPlayerY(opts);
</script>

梦缘 发表于 2023-5-21 20:11

有特色的制作，老师好棒啊！{:4_178:}

醉美水芙蓉 发表于 2023-5-21 20:58

起个网名好难 发表于 2023-5-21 21:04

梦缘 发表于 2023-5-21 20:11
有特色的制作，老师好棒啊！

谢谢支持与欣赏，晚上好！

起个网名好难 发表于 2023-5-21 21:04

醉美水芙蓉 发表于 2023-5-21 20:58
问候老师晚上好！老师的作品很特别！

谢谢支持与欣赏，晚上好！

红影 发表于 2023-5-21 22:00

这个好，还有养生内容呢，在过节的时候看看什么对人体好，也不错。难难的制作真棒，点赞{:4_199:}

起个网名好难 发表于 2023-5-21 23:49

红影 发表于 2023-5-21 22:00
这个好，还有养生内容呢，在过节的时候看看什么对人体好，也不错。难难的制作真棒，点赞

谢谢支持与欣赏，晚上好！

梦江南 发表于 2023-5-22 08:19

棒棒哒！

起个网名好难 发表于 2023-5-22 09:12

梦江南 发表于 2023-5-22 08:19
棒棒哒！

谢谢支持与欣赏，上午好！

红影 发表于 2023-5-22 18:23

起个网名好难 发表于 2023-5-21 23:49
谢谢支持与欣赏，晚上好！

问好老师，新周快乐{:4_187:}

起个网名好难 发表于 2023-5-22 18:31

红影 发表于 2023-5-22 18:23
问好老师，新周快乐

谢谢支持与欣赏，晚上好！

红影 发表于 2023-5-22 19:49

起个网名好难 发表于 2023-5-22 18:31
谢谢支持与欣赏，晚上好！

不客气啊，应该谢谢难难带来的精美呢{:4_187:}

起个网名好难 发表于 2023-5-22 20:12

红影 发表于 2023-5-22 19:49
不客气啊，应该谢谢难难带来的精美呢

这帖用手机看就有点乱套了{:5_102:}，继续完善…………

红影 发表于 2023-5-22 20:53

起个网名好难 发表于 2023-5-22 20:12
这帖用手机看就有点乱套了，继续完善…………

电脑看很不错啊，一点没问题{:4_187:}

起个网名好难 发表于 2023-5-22 21:10

红影 发表于 2023-5-22 20:53
电脑看很不错啊，一点没问题

电脑看着还行，不是还有不少网友是用手机浏览论坛吗。

红影 发表于 2023-5-22 21:58

起个网名好难 发表于 2023-5-22 21:10
电脑看着还行，不是还有不少网友是用手机浏览论坛吗。

哦哦，难难考虑得周到，我基本不用手机上来的，所以不太注意这个呢{:4_173:}

起个网名好难 发表于 2023-5-23 05:43

红影 发表于 2023-5-22 21:58
哦哦，难难考虑得周到，我基本不用手机上来的，所以不太注意这个呢

我也是在电脑上看，偶尔在手机上看一眼效果都不很好，主要问题是手机显示不了宽幅的画面（或许是我自己的手机的问题）。

现在好像摸到点门了。

红影 发表于 2023-5-23 10:41

起个网名好难 发表于 2023-5-23 05:43
我也是在电脑上看，偶尔在手机上看一眼效果都不很好，主要问题是手机显示不了宽幅的画面（或许是我自己的 ...

嗯，可以使用匹配视窗窗口的设置，这个话题在学习全屏的时候曾涉及过。

起个网名好难 发表于 2023-5-23 11:12

红影 发表于 2023-5-23 10:41
嗯，可以使用匹配视窗窗口的设置，这个话题在学习全屏的时候曾涉及过。

哦，没看过全屏设置的有关帖子，等会去看看。

红影 发表于 2023-5-23 16:52

起个网名好难 发表于 2023-5-23 11:12
哦，没看过全屏设置的有关帖子，等会去看看。

那个不是说配置视窗窗口，而是用百分比设置位置适应变化。我只是联想了一下，感觉难难也是在适应窗口{:4_187:}
页: [1] 2
查看完整版本: 小满