小辣椒 发表于 2023-2-16 13:59

精彩频谱和光感效果欣赏TO：走过岁月

<style>
.lrcShow{font:bold 2.8em serif;position:absolute;width:80%;height:2em;bottom:20px;left:20%;color:hsl(60,100%,40%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;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%;}}
#oBlk        {
        width:1400px;height:1450px;margin:80px 0 40px -410px;
        display: grid;background-color:skyblue;
        place-items:center;position:relative;
        grid-template-rows:1370px, 80px;
        grid-template-columns:100%;
        box-shadow:3px 3px 8px darkgray;
        overflow:hidden;border-radius:24px;
}

#img_area        {
        width:100%;height:100%;
        display: grid;place-items:center;
        grid-template-rows:repeat(6, 1fr);
        grid-template-columns:repeat(5, 1fr);
}
#img_area img        {overflow:hidden; border-radius:5%;}

#img_area .roundGrid        {
        width:200px;height:180px;cursor:pointer;
        margin-bottom:12px;
}
#img_area .roundGrid img{
        width:100%;
}
#img_area .roundGrid span{
        display:none;
}
#img_area .midGrid        {
        width:700px; height:720px;
        grid-area: 2 / 2 / span 4 / span 3 ;
/***************************************
    grid-column-start: 2;
        grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 6;
***************************************/
        display:grid;
        place-items:center;
}
#img_area .midGrid img        {
        width:100%;
}
#lrc_area        {
    grid-column-start: 1;
        grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
        display: grid;place-items:center;
}
.lrcShow{
        font-size:48px;bottom:0px;font-family:微软雅黑;
}

#dt2{ position: absolute; width: 240px; height: 180px;top:900px;; left: 50p%; }

#dt3{ position: absolute; width: 260px; height: 140px; top:235px; left: 50p%; }


</style>
<!--
-->
<div id="oBlk">


<img id="dt2" src="https://pic.imgdb.cn/item/63ece424f144a0100777ffd7.gif" alt="" />

<img id="dt3" src="https://pic.imgdb.cn/item/63ece46af144a01007789240.gif" alt="" />

<div id="img_area"></div>
<div id="lrc_area"><div class="lrcShow" data-lrc="音乐响起"></div></div>
</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;}('l E=8(){x 4.W.1G(4,17)};E.16={1a:E,W:8(w){q=w.F.I(/(^\\s*)|(\\s*$)/g,\'\');U.T(q);4.10=B.1g(w.10);4.7=B.1i(\'.1f\');4.e=4.Y(q);4.O(w.1c)},Y:8(q){l k=q.I(/(^\\s*)|(\\s*$)/g,"").N(/\\r|\\n|\\r\\n/);l t=1d 1j();P(K h=0;h<k.o;h++){K v=k.1e(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(v){A=k.1b(\']\');f(A>0)F=k.R(A+1);P(m=0;m<v.o;m++){J=v.R(1).I(\']\',\'\').N(/:/);H=(+J)*1h+(+J);f(t.o==0&&H!=0){t.L({c:0,D:\'\\15\\Q\\Q\\19\\18\\14\\1K\'})}t.L({c:H,D:F})}}}x t.1H(8(a,b){x(a.c-b.c)})},G:8(C){4.7.1A=4.7.1D.1B=4.e.D;4.7.i.p(\'--1E\',\'1F\'+(4.9%2));4.7.i.p(\'--C\',C+\'1C\');4.7.i.p(\'--y\',\'Z\');4.9++},O:8(M){4.6=B.1L("S");4.6.1M=z;4.6.1I=z;4.6.1J=1p;4.6.1o=M;4.7.1r(4.6);l 5=4;l 1q=0;4.9=0;4.6.j(\'1l\',8(){5.9=0;4.u()});4.6.j(\'u\',8(){5.7.i.p(\'--y\',\'Z\')});4.6.j(\'12\',8(){f(5.9==1&&4.V<1){5.6.u();x z}5.7.i.p(\'--y\',\'13\')});4.6.j(\'1k\',8(){U.T("S 1n, 1m u 1x 1w");5.7.i.1z=\'1y\';5.7.1t(4)});4.6.j(\'1s\',8(){f(5.9<5.e.o){f(4.V>=5.e.c){f(5.9<(5.e.o-1)){5.G((5.e.c-5.e.c)*X)}11{5.G((4.1v-5.e.c)*X)}}}});4.7.j(\'1u\',8(){f(5.6.13){5.6.u()}11{5.6.12()}})}}',62,111,'||||this|that|mObj|lrcShowObj|function|idx|||seconds||lrcVec|if||index|style|addEventListener|parts|var|||length|setProperty|lyricTxt|||lrcs|play|chkTime|opts|return|aniPlayState|false|tIdx|document|durTime|words|lrcPlayerY|lrcTxt|showLrc|_0|replace|ta|let|push|mUrl|split|genPlayer|for|u0020|substr|audio|log|console|currentTime|init|950|handleLrc|running|audioCtrl|else|pause|paused|u5e74|u00A9|prototype|arguments|u66fe|u4e5f|constructor|lastIndexOf|audioURL|new|match|lrcShow|getElementById|60|querySelector|Array|error|ended|remove|wrong|src|true|turn|appendChild|timeupdate|removeChild|click|duration|event|start|none|display|innerHTML|lrc|ms|dataset|aniName|bgMove|apply|sort|muted|autoplay|u8f7b|createElement|loop'.split('|'),0,{}))
</script>
<script>
let pics = [
["https://wj.zp68.com/lxx/yunhua/2022/05/28/01.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/02.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/03.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/04.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/05.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/06.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/07.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/08.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/09.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/10.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/11.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/12.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/13.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/14.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/15.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/16.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/17.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/18.gif"],
["https://wj.zp68.com/lxx/yunhua/2022/05/28/19.gif"]
];

let oBlk = document.querySelector('#img_area');

for(n = 0; n < pics.length; n++)        {
        let divObj = document.createElement('div');
        let imgObj = document.createElement('img');
       
        divObj.dataset.idx = n;
        divObj.className = n == 0?'midGrid':'roundGrid';
       
        imgObj.src = pics;
       
        divObj.appendChild(imgObj);
        oBlk.appendChild(divObj);
}

let divObjs = oBlk.querySelectorAll('.midGrid , .roundGrid');

for(n = 0; n < divObjs.length; n++)        {
        divObjs.onclick = function()        {
                if(this.className == "midGrid")        return;
                oBlk.querySelector('.midGrid').className = 'roundGrid';
                this.className = "midGrid";
        }
}
var lrctxt = `
音乐响起
欣赏走过岁月AE制作
粒子频谱和光感效果
很喜欢捣鼓岁月的这些
精美的粒子效果
小辣椒自己不会做
跟着岁月后面玩玩他的
谢谢起个网名好难的代码
小辣椒套用玩玩
现在取的动图是岁月的小图
原图太大出来会卡
今天送给大家欣赏
一起跟着音乐节奏摇起来
一起欣赏动感的美
谢谢欣赏!`;
//       
var opts = {
    lrcTxt:lrctxt,
    audioURL:"https://wj.zp68.com/lxx/yunhua/2022/05/28/01.mp3",
}
new lrcPlayerY(opts);

</script>

小辣椒 发表于 2023-2-16 14:00

@走过岁月
谢谢岁月精彩的制作粒子频谱和光感效果分享。

小辣椒 发表于 2023-2-16 14:01

这些都是去年5月份以前的，后面的制作小辣椒还没有做的

小辣椒 发表于 2023-2-16 14:04

@起个网名好难

谢谢高手的代码分享，小辣椒套用一个{:4_187:}

小辣椒 发表于 2023-2-16 14:06

因为都是动图打开可能会慢一点，稍等一下

走过岁月 发表于 2023-2-16 14:07

坐沙发

走过岁月 发表于 2023-2-16 14:08

音乐好震撼

小辣椒 发表于 2023-2-16 14:10

走过岁月 发表于 2023-2-16 14:08
音乐好震撼

岁月好，最欣赏你的精彩粒子频谱{:4_178:}

小辣椒 发表于 2023-2-16 14:10

走过岁月 发表于 2023-2-16 14:07
坐沙发

出来流畅吗

走过岁月 发表于 2023-2-16 14:12

好多粒子，小辣椒都做好多粒子帖了

走过岁月 发表于 2023-2-16 14:13

小辣椒做的个个都精彩

走过岁月 发表于 2023-2-16 14:14

这里打开很快

小辣椒 发表于 2023-2-16 14:15

走过岁月 发表于 2023-2-16 14:12
好多粒子，小辣椒都做好多粒子帖了
这里只是一小部分的。是你分享的多

梦油 发表于 2023-2-16 14:16

小辣椒朋友这个创作很有新意。

小辣椒 发表于 2023-2-16 14:16

走过岁月 发表于 2023-2-16 14:14
这里打开很快

那就好，大的发现卡了，暂时小图做一个

小辣椒 发表于 2023-2-16 14:17

走过岁月 发表于 2023-2-16 14:13
小辣椒做的个个都精彩

是有岁月的精彩分享才有小辣椒这些制作好不好{:4_170:}

小辣椒 发表于 2023-2-16 14:22

梦油 发表于 2023-2-16 14:16
小辣椒朋友这个创作很有新意。

谢谢梦油欣赏，这个是套用起个网名好难的代码制作，是岁月的原创AE粒子效果，小辣椒最喜欢捣鼓玩的

走过岁月 发表于 2023-2-16 14:24

小辣椒 发表于 2023-2-16 14:17
是有岁月的精彩分享才有小辣椒这些制作好不好

不错，同样精彩

小辣椒 发表于 2023-2-16 14:27

走过岁月 发表于 2023-2-16 14:24
不错，同样精彩

那是你的漂亮制作才会让小辣椒痴迷上这些粒子频谱

樵歌 发表于 2023-2-16 14:29

小辣椒跳街舞，好看的有木有{:4_189:}
页: [1] 2 3 4
查看完整版本: 精彩频谱和光感效果欣赏TO：走过岁月