花潮大联欢（套用一个瞎捣鼓的）
<style>#papa { left: -394px;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: 458px; left: calc(70% - 80px); bottom: 30px; opacity: 0; }
#wu2 { width: 304px; height: 458px; left: calc(20% - 30px); bottom: 30px; opacity: 0; }
#wu3 { width: 100px; height: 167px; left: 220px; bottom: 150px; opacity: 0; transform: scale(0); }
#wu4 { width: 110px; height: 170px; left: 275px; bottom: 150px; opacity: 0; transform: scale(0); }
#wu5 { width: 90px; height: 123px; left: 580px; bottom:350px; 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="wu1" src="https://wj.zp68.com/lxx/yunhua/2022/08/06/005.gif" alt="" />
<img id="wu2" src="https://wj.zp68.com/lxx/yunhua/2022/08/06/005.gif" alt="" />
<img id="wu3" src="https://wj.zp68.com/lxx/yunhua/2022/08/06/002.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>
<br><br><br><br><br><br><br> @红影
亲爱的，套用一个，以后你做好我套用{:4_170:} 现成的图图，就加了几个效果 我爱花潮。谢谢小辣椒朋友。 小辣椒，俺驻足观看，太精彩了{:4_187:}{:4_199:} 看点多多了，太美了{:4_205:} 这也是费时费力的制作，效果太好了，小辣椒棒棒哒{:4_187:} 小辣椒的这个制作太漂亮了。赞！ 看我能不能也学到制作一个出来玩玩。{:4_178:} 太美啦{:4_178:}小辣椒名牌精品，稳产高产{:4_187:}{:4_183:} 这么多舞者，好热闹啊，真是花潮不夜天啊。这个大联欢太美了。{:4_199:} 小辣椒 发表于 2022-8-6 14:06
@红影
亲爱的，套用一个，以后你做好我套用
亲爱的也收集了好多动态图图呢，你收集的更漂亮，太美了{:4_187:} 这组代码你玩玩的比我还好。赞赞赞 梦油 发表于 2022-8-6 14:59
我爱花潮。谢谢小辣椒朋友。
谢谢梦油{:4_187:} 千羽 发表于 2022-8-6 15:51
小辣椒，俺驻足观看，太精彩了
谢谢千羽欣赏{:4_179:} 千羽 发表于 2022-8-6 15:55
看点多多了，太美了
这个是黑黑分享的教程，我套用红影的 千羽 发表于 2022-8-6 15:57
这也是费时费力的制作，效果太好了，小辣椒棒棒哒
做做不难，素材难找 加林森 发表于 2022-8-6 17:27
小辣椒的这个制作太漂亮了。赞！
谢谢队长，你也是可以玩一下的 加林森 发表于 2022-8-6 17:29
看我能不能也学到制作一个出来玩玩。
肯定可以的 樵歌 发表于 2022-8-6 17:49
太美啦小辣椒名牌精品，稳产高产
樵哥哥不是啊，我套用红影的
页:
[1]
2