加林森 发表于 2022-5-27 16:25

本帖最后由 加林森 于 2022-8-7 20:37 编辑 <br /><br />红影 发表于 2022-5-27 16:22
漂亮的制作，这个制作倒是不需要太大的图图呢。欣赏队长好帖
谢谢红影！下午好！{:4_204:}

<style>
#papa { left: -393.5px;top:150px; width: 1383px; height: 744px; display: grid; place-items: center; background: gray url('https://wj.zp68.com/lxx/yunhua/2022/08/06/9IF.gif') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative;overflow: hidden; }
#papa div, #papa img, #papa span { position: absolute; }
#mama { width: 420px; height: 150px; left: 114pxbackground: radial-gradient(at 10% 20%, snow, transparent); border-radius: 20%; display: grid; place-items: center; transform: rotate(0deg);box-shadow: -30px 30px 60px #444;}
#disc { right: calc(50% - 30px); top: calc(20% - 30px); width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient14(transparent 4px,red 0); border-radius: 50%; opacity: 0; cursor: pointer; animation: rot 2s linear infinite; }
#wu1 { width: 304px; height: 280px; left: calc(70% - 80px); bottom: 30px; opacity: 0; }
#wu2 { width: 304px; height: 280px; left: calc(20% - 30px); bottom: 30px; opacity: 0; }
#wu3 { width: 350px; height: 150px; left: 182px; bottom: 280px; opacity: 0; transform: scale(0); }
#wu4 { width: 80px; height: 142px; left: 275px; bottom: 150px; opacity: 0; transform: scale(0); }
#wu5 { width: 90px; height: 123px; left: 580px; bottom:350px; opacity: 0; transform: scale(0); }
#tit { font: bold 2em/2.4em sans-serif; color: #F6DE80; text-shadow: 1px 1px 2px rgba(0,0,0,.75); opacity: 0;

}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="disc"></div>
        <img id="wu1" src="https://pic.imgdb.cn/item/62ef87dc16f2c2beb1a100e7.gif" alt="" />
                <img id="wu2" src="https://pic.imgdb.cn/item/62ef87dc16f2c2beb1a100e7.gif" alt="" />
        <img id="wu3" src="https://pic.imgdb.cn/item/62ef85bb16f2c2beb1993b6c.gif" alt="" />
        <img id="wu4" src="https://wj.zp68.com/lxx/yunhua/2022/08/06/001.gif" alt="" />
        <img id="wu5" src="https://wj.zp68.com/lxx/yunhua/2022/08/06/003.gif" alt="" />
        <div id="mama"><span id="tit">花潮大联欢</span></div>
</div><br><br><br><br><br><br>

<script>
let idx = 0, aud = new Audio();
aud.src = 'https://wj1.zp68.com:812/lxx/yy/jywm.mp3 ';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
let TT = setTimeout(change,3000);

disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

function change() {
        let aniAr = [
                ,
                              ,
                ,
                ,
                ,
                ,                     
                              ,
                              ,       
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,       
        ];
        let ele = aniAr;
        ele.style.transition = 'all 3s';
        ele.style.cssText += aniAr;
        idx ++;
        idx <= aniAr.length - 1 ? TT = setTimeout(change, 3000) : clearTimeout(TT);
}
</script>

东篱闲人 发表于 2022-5-27 16:27

加林森 发表于 2022-5-27 16:08
是你痒了。。。。

俺还好，常洗澡。。。{:5_117:}

加林森 发表于 2022-5-27 16:31

东篱闲人 发表于 2022-5-27 16:27
俺还好，常洗澡。。。

好的好的，你继续。。。。{:4_189:}

东篱闲人 发表于 2022-5-27 16:34

加林森 发表于 2022-5-27 16:31
好的好的，你继续。。。。

你要皮炎平吗？{:5_115:}

加林森 发表于 2022-5-27 16:35

东篱闲人 发表于 2022-5-27 16:34
你要皮炎平吗？

你自己用。。。。{:4_189:}

东篱闲人 发表于 2022-5-27 16:36

加林森 发表于 2022-5-27 16:35
你自己用。。。。

{:4_170:}

加林森 发表于 2022-5-27 16:39

东篱闲人 发表于 2022-5-27 16:36


开心了哇。。。。{:4_172:}

小辣椒 发表于 2022-5-27 16:48

队长每天复习功课，优秀学生{:4_199:}

加林森 发表于 2022-5-27 16:51

小辣椒 发表于 2022-5-27 16:48
队长每天复习功课，优秀学生

谢谢小辣椒表扬啊，我快要飞起来啦。。。。{:4_189:}

小辣椒 发表于 2022-5-27 16:52

加林森 发表于 2022-5-27 16:51
谢谢小辣椒表扬啊，我快要飞起来啦。。。。

队长谦虚了，确实每天很认真的在复习前面学习过的东西

梦油 发表于 2022-5-27 16:52

加林森 发表于 2022-5-27 13:33
肯定的啊。

哈哈哈……

加林森 发表于 2022-5-27 16:54

小辣椒 发表于 2022-5-27 16:52
队长谦虚了，确实每天很认真的在复习前面学习过的东西

必须的嘛，只有这样才能巩固的。

加林森 发表于 2022-5-27 16:55

梦油 发表于 2022-5-27 16:52
哈哈哈……

老梦开心就好！

小辣椒 发表于 2022-5-27 16:56

加林森 发表于 2022-5-27 16:54
必须的嘛，只有这样才能巩固的。

向队长学习~~~{:4_187:}

我准备下了，准备吃饭去了

加林森 发表于 2022-5-27 16:58

小辣椒 发表于 2022-5-27 16:56
向队长学习~~~

我准备下了，准备吃饭去了

好的好的。慢慢吃，不着急的。{:4_171:}
页: 1 [2]
查看完整版本: 《再次拥有》- 千百惠