梦江南 发表于 2024-12-18 10:08

黄菊花开了 （学习黑黑老师瞳的代码）

本帖最后由 梦江南 于 2024-12-18 10:08 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 591px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/67622516d0e0a243d4e596c5.png') no-repeat center/cover;border-radius:32px; }
        #player { position: absolute; width: 400px; height: 400px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(0,0,128,.05); cursor: pointer; display: grid; place-items: center; }
        #mypic { width: 100%; height: 100%; opacity: .75; }
        #prog { bottom: 30px; width: 280px; --bg1:        OrangeRed; --bg2: OrangeRed; --color: OrangeRed; }
       #lrc {top: 30px; --bg: linear-gradient(Honeydew, #ADFF2F); color: Gold;font: bold 2.0em cursive;opacity: .86; }

        #fsbtn { bottom: 60px; }

        @keyframes in1 {
                0% { width: 0; height: 0; transform: rotate(0); }
                60% { width: 100%; height: 100%; transform: rotate(-720deg) }
                90% { width: 100%; height: 100%; transform: rotate(-720deg); }
                100% { width: 0; height: 0; transform: rotate(0); }
        }
        @keyframes in2 {
                0% { width: 0; height: 0; transform: rotate(0); }
                60% { width: 100%; height: 100%; transform: rotate(720deg) }
                90% { width: 100%; height: 100%; transform: rotate(720deg); }
                100% { width: 0; height: 0; transform: rotate(0); }
        }
</style>

<div id="tz" class="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27927355"></audio>
        <div id="player"><img id="mypic" src="https://pic.imgdb.cn/item/6762255bd0e0a243d4e596cc.png" alt="" /></div>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       

];

var audio = new Aud(tz, player, lrcAr);
audio.play();
fscreen.fs(tz, fsbtn);

var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2'];

var picAr = [
        'https://pic.imgdb.cn/item/6762255bd0e0a243d4e596cc.png',
        'https://pic.imgdb.cn/item/6762258dd0e0a243d4e596d6.png',
        'https://pic.imgdb.cn/item/676225b1d0e0a243d4e596dd.png',
        'https://pic.imgdb.cn/item/676225e0d0e0a243d4e596e5.png',
      'https://pic.imgdb.cn/item/67622626d0e0a243d4e596f3.png',
      'https://pic.imgdb.cn/item/67622643d0e0a243d4e596fc.png',
       ' https://pic.imgdb.cn/item/67622c0dd0e0a243d4e59804.png',
       ' https://pic.imgdb.cn/item/67622caad0e0a243d4e59822.png',

];

var showPics = (pics) => {
        mypic.src = pics;
        mypic.style.animation = `${anis} ${gapTime}ms forwards var(--state)`;
        picIdx = (picIdx + 1) % pics.length;
};

setInterval( () => {
        if(!aud.paused) showPics(picAr);
}, gapTime);

showPics(picAr);
</script>

夕阳黄昏 发表于 2024-12-18 11:40

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

小辣椒 发表于 2024-12-18 13:44

阿姨还是速度完成作业了，{:4_199:}

小辣椒 发表于 2024-12-18 13:45

欣赏阿姨的精美制作，小辣椒欣赏加学习{:4_179:}

梦江南 发表于 2024-12-18 14:19

夕阳黄昏 发表于 2024-12-18 11:40


下午好，谢谢老师分享支持。{:4_204:}

梦江南 发表于 2024-12-18 14:20

小辣椒 发表于 2024-12-18 13:44
阿姨还是速度完成作业了，

下午问好，谢谢小辣椒分享支持。{:4_204:}

梦江南 发表于 2024-12-18 14:22

小辣椒 发表于 2024-12-18 13:45
欣赏阿姨的精美制作，小辣椒欣赏加学习

阿姨只会套用，不会发挥光大。{:4_201:}

红影 发表于 2024-12-18 14:53

漂亮的黄菊花，美好的约定。
欣赏江南漂亮的制作{:4_199:}

梦江南 发表于 2024-12-18 15:57

红影 发表于 2024-12-18 14:53
漂亮的黄菊花，美好的约定。
欣赏江南漂亮的制作

谢谢影子欣赏支持鼓励。您刚回家好好休息，身体要紧。{:4_187:}

红影 发表于 2024-12-18 17:02

梦江南 发表于 2024-12-18 15:57
谢谢影子欣赏支持鼓励。您刚回家好好休息，身体要紧。

昨天回来的，今天已经在单位里了。这会下班了，撤{:4_193:}

梦江南 发表于 2024-12-18 17:15

红影 发表于 2024-12-18 17:02
昨天回来的，今天已经在单位里了。这会下班了，撤

天这么冷外出很辛苦的。今天又要上斑，就别回复了。

红影 发表于 2024-12-18 21:45

梦江南 发表于 2024-12-18 17:15
天这么冷外出很辛苦的。今天又要上斑，就别回复了。

没事的，谢谢江南关心{:4_179:}

梦江南 发表于 2024-12-19 08:46

红影 发表于 2024-12-18 21:45
没事的，谢谢江南关心

早上好，上斑出门记得要围上围巾，戴上帽子。{:4_179:}

小辣椒 发表于 2024-12-19 21:15

梦江南 发表于 2024-12-18 14:20
下午问好，谢谢小辣椒分享支持。

阿姨晚上好，我最近只能匆匆忙忙上来看看了

小辣椒 发表于 2024-12-19 21:17

梦江南 发表于 2024-12-18 14:22
阿姨只会套用，不会发挥光大。

套用也是一种学习，再说你最近不要太累，套用轻松一点，就这么玩，而且现在的歌曲和图意都非常的美，歌特别好听！

红影 发表于 2024-12-19 21:21

梦江南 发表于 2024-12-19 08:46
早上好，上斑出门记得要围上围巾，戴上帽子。

呵呵，哪有那么娇气，稀里糊涂地过，倒也更皮实{:4_173:}

梦江南 发表于 2024-12-20 07:42

小辣椒 发表于 2024-12-19 21:15
阿姨晚上好，我最近只能匆匆忙忙上来看看了

小辣椒早上好，没事的，您忙更要照顾好自己。祝周末快乐！{:4_204:}

梦江南 发表于 2024-12-20 07:44

小辣椒 发表于 2024-12-19 21:17
套用也是一种学习，再说你最近不要太累，套用轻松一点，就这么玩，而且现在的歌曲和图意都非常的美，歌特 ...

谢谢小辣椒关心，阿姨知道了，就这么玩，不让自己太累。您也一样，保重好身体。

梦江南 发表于 2024-12-20 07:46

本帖最后由 梦江南 于 2024-12-20 07:47 编辑

红影 发表于 2024-12-19 21:21
呵呵，哪有那么娇气，稀里糊涂地过，倒也更皮实
这不是娇气，天气太冷，注意点总会好点。{:4_204:}

小辣椒 发表于 2024-12-20 21:36

梦江南 发表于 2024-12-18 14:20
下午问好，谢谢小辣椒分享支持。

阿姨晚上好，你是最棒的~~~{:4_179:}
页: [1] 2
查看完整版本: 黄菊花开了 （学习黑黑老师瞳的代码）