小辣椒 发表于 2023-6-1 12:02

海底世界 -- 今天六一儿童节


<style>
#papa {margin: 120px 0 0 calc(50% - 503px);width: 892px;height: 570px;background: tan url('https://wj.zp68.com/lxx/yunhua/2022/05/31/21.gif');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;--state: paused;}
css-doodle{position: absolute;}

</style>

<div id="papa">
<css-doodle grid="1" id="mplayer">
       
:doodle {
                @size: 892px 570px;
                z-index: 1;
               
        }
        @size: 100px;
        clip-path: @shape(
                points: 480;
                scale: .3;
                move: 0 .35;
                x: sin(t) + sin(6t) + tan.sin(2t);
                y: cos(t) + cos(5t) + tan.cos(8t);
        );
        position: absolute;




transform: rotate(90deg);
        background: Lime;
        offset-path: path('M412 150Q212 0,212 100 T700 100Q500 0,600 100 T400 150');
        animation: move 20s infinite linear var(--state);
        cursor: pointer;
        @keyframes move { to { offset-distance: 100%;} }
</css-doodle>
        <css-doodle id="lrc">
                :doodle {
                        @size: auto 4em;
                        top: 420px; left: 37%;
                        --geci: "花潮lrc在线"; --motion: cover2; --tt: 1s;
                }
                /* 单元格两个伪元素显示lrc歌词 */
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        color: snow; /* 歌词底色 */
                        font: bold 2em sans-serif;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
               }
                :after {
                        position: absolute;
                        width: 0;
                        color:Lime; /* 同步歌词颜色 */
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        </css-doodle>
<css-doodle grid="16" id="fFloat">
       




        animation: fall 40s @r(-6, 36)s infinite var(--state);
        @keyframes fall {
                from { transform: rotate(0deg) translate(0px); }
                to { transform: rotate(@r(-60,60)deg) translate(-1500px); }
        }
</css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1938357124.mp3" autoplay loop></audio>

</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);
        let slip = 0.1, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
        let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
       
        let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused'),fFloat.style.setProperty('--state', 'paused') ) : ( papa.style.setProperty('--state','running'),fFloat.style.setProperty('--state', 'running'));
        let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
        mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;};
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小辣椒 发表于 2023-6-1 12:03

@红影

亲爱的，速度的抄个作业{:4_170:}

小辣椒 发表于 2023-6-1 12:04

就路径瞎改了一下，旧图图做的，最近没有怎么做作业，只能少玩一下了

亦是金 发表于 2023-6-1 12:38

又见到小辣椒！高兴！问好了，节日快乐！{:4_187:}

走过岁月 发表于 2023-6-1 13:07

六一海底世界游

樵歌 发表于 2023-6-1 13:11

开心{:4_189:}

梦缘 发表于 2023-6-1 15:39

好看的海底世界，感谢分享，点赞!{:4_204:}

梦油 发表于 2023-6-1 15:58

小辣椒朋友的制作十分贴近哈孩子们的爱好。

醉美水芙蓉 发表于 2023-6-1 16:48

小文 发表于 2023-6-1 18:15

过六一罗

红影 发表于 2023-6-1 18:41

还有一条播放器的羽儿跟着一起遨游，非常可爱的制作。亲爱的帖子太棒了{:4_199:}

南无月 发表于 2023-6-1 18:41

色彩鲜艳美丽，十分欢乐的六一贺贴{:4_187:}

千羽 发表于 2023-6-1 19:26

美轮美奂的海底世界，太漂亮了{:4_187:}

千羽 发表于 2023-6-1 19:27

小辣椒，节日快乐{:4_187:}

千羽 发表于 2023-6-1 19:28

才发现这儿歌挺好听{:4_173:}

小辣椒 发表于 2023-6-1 21:06

千羽 发表于 2023-6-1 19:28
才发现这儿歌挺好听

千羽晚上好{:4_171:}

小辣椒 发表于 2023-6-1 21:06

千羽 发表于 2023-6-1 19:27
小辣椒，节日快乐

我不是儿童了，是儿童他妈了{:4_170:}

小辣椒 发表于 2023-6-1 21:07

千羽 发表于 2023-6-1 19:26
美轮美奂的海底世界，太漂亮了

去年的旧图，今年继续用

小辣椒 发表于 2023-6-1 21:08

南无月 发表于 2023-6-1 18:41
色彩鲜艳美丽，十分欢乐的六一贺贴

月儿晚上好

焱鑫磊 发表于 2023-6-19 23:00

这个更漂亮！赞！{:4_204:}
页: [1]
查看完整版本: 海底世界 -- 今天六一儿童节