红影 发表于 2022-8-5 23:22

【中伏消暑】第十一天 池


<style>
#papa { left: -214px;top:120px; width: 1024px; height: 574px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62ea9a8f16f2c2beb1a1a86c.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative;overflow: hidden; }
#papa div, #papa img, #papa span { position: absolute; }

#mama { width: 320px; height: 100px; left: calc(50% - 160px); top: 140px; background: radial-gradient(at 40% 30%, snow, transparent); border-radius: 20%; display: grid; place-items: center; transform: rotate(0deg);box-shadow: -30px 30px 50px #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; }
#dagu { width: 80px; height: 120px; left: calc(50% - 40px); bottom: 208px; opacity: 0; }

#nv1 { width: 106px; height: 120px; left: 597px; bottom: 208px; opacity: 0; transform: scale(0.2); }
#nan3 { width: 131px; height: 120px; left: 275px; bottom: 208px; opacity: 0; transform: scale(0.2); }

#nv2 { width: 101px; height: 120px; left: 600px; bottom: 208px; opacity: 0; transform: scale(0.2); }
#nan2 { width: 170px; height: 106px; left: 256px; bottom: 208px; opacity: 0; transform: scale(0.2); }
#nv3{ width: 93px; height: 123px; left: 613px; bottom: 208px; opacity: 0; transform: scale(0.2); }
#nan1 { width: 122px; height: 120px; left: 280px; bottom:208px; opacity: 0; transform: scale(0.2); }
#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="dagu" src="https://pic.imgdb.cn/item/62ea9aa716f2c2beb1a1c3b2.gif" alt="" />
        <img id="nv1" src="https://pic.imgdb.cn/item/62ea9ac416f2c2beb1a1e484.gif" alt="" />
        <img id="nan1" src="https://pic.imgdb.cn/item/62ea9ae216f2c2beb1a2059b.gif" alt="" />
        <img id="nv2" src="https://pic.imgdb.cn/item/62ea9afc16f2c2beb1a23b36.gif" alt="" />
        <img id="nan2" src="https://pic.imgdb.cn/item/62ea9b4516f2c2beb1a2862b.gif" alt="" />
        <img id="nv3" src="https://pic.imgdb.cn/item/62ea9b6316f2c2beb1a2a93e.gif" alt="" />
        <img id="nan3" src="https://pic.imgdb.cn/item/62ea9b7d16f2c2beb1a2c85e.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 = 'http://www.kumeiwp.com/sub/filestores/2022/06/26/74023cd0d52ce1a663b2819e8a397842.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-8-5 23:24

都这么晚了，还没想好写什么好，天又热，算了，还是音画凑数交作业吧{:4_173:}

小辣椒 发表于 2022-8-5 23:35

哇瑟~~~亲爱的，你太厉害了，这么精彩的制作{:4_178:}

小辣椒 发表于 2022-8-5 23:35

这个效果太棒了{:4_199:}{:4_199:}

小辣椒 发表于 2022-8-5 23:36

你小动图居然收藏的这么多

马黑黑 发表于 2022-8-5 23:52

场面壮阔，值得好好看看

樵歌 发表于 2022-8-6 07:01

师兄在下面巴巴掌都拍麻了{:4_199:}

樵歌 发表于 2022-8-6 07:02

第一个进的女生中途溜号了，结果是三比四打成平手，还是女生赢了{:4_189:}

醉美水芙蓉 发表于 2022-8-6 09:03

疏星淡月 发表于 2022-8-6 09:15

吓人{:4_173:}

梦油 发表于 2022-8-6 09:15

红影朋友早晨好！这演员出场设计得很巧妙。

红影 发表于 2022-8-6 20:44

小辣椒 发表于 2022-8-5 23:35
哇瑟~~~亲爱的，你太厉害了，这么精彩的制作

谢谢亲爱的，混作业呢{:4_173:}

红影 发表于 2022-8-6 20:45

小辣椒 发表于 2022-8-5 23:36
你小动图居然收藏的这么多

恩，人物动图真的收集了不少，不过都不及亲爱的收集的那些好看。

红影 发表于 2022-8-6 20:45

马黑黑 发表于 2022-8-5 23:52
场面壮阔，值得好好看看

谢谢黑黑，这个里面把那个缩放用了进去{:4_173:}

红影 发表于 2022-8-6 20:46

樵歌 发表于 2022-8-6 07:01
师兄在下面巴巴掌都拍麻了

哈哈，谁输谁赢管它呢，师兄何必那么用劲{:4_173:}

红影 发表于 2022-8-6 20:48

樵歌 发表于 2022-8-6 07:02
第一个进的女生中途溜号了，结果是三比四打成平手，还是女生赢了

对，女生以少胜多，肯定女生赢了{:4_173:}

红影 发表于 2022-8-6 20:49

醉美水芙蓉 发表于 2022-8-6 09:03
红影厉害!做得漂亮！

谢谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2022-8-6 20:49

疏星淡月 发表于 2022-8-6 09:15
吓人

跳舞啊，又不是打架，咋会吓人呢{:4_173:}

红影 发表于 2022-8-6 20:50

梦油 发表于 2022-8-6 09:15
红影朋友早晨好！这演员出场设计得很巧妙。

谢谢梦油，跟子啊后面学习代码，这些都是代码的功效{:4_173:}

马黑黑 发表于 2022-8-6 21:10

红影 发表于 2022-8-6 20:45
谢谢黑黑，这个里面把那个缩放用了进去

很巧妙的应用
页: [1] 2 3 4 5
查看完整版本: 【中伏消暑】第十一天 池