太空美女送大猫咪

马黑黑 · 发表于 2022-1-30 21:10

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

加林森 · 发表于 2022-1-30 21:20

老黑又换玩法了啊。这个挺好看的。

马黑黑 · 发表于 2022-1-30 21:23

代码酒后做的，在上一帖的基础上修改一些机制，分享如下：
<style type="text/css">

.paBox {
margin: auto;
width: 720px;
height: 620px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 4px 4px 8px 2px #000;
padding: 8px;
}

.imgBox { position: relative; flex-grow: 2; background: repeating-radial-gradient(circle, white, olive,transparent, gray); }
.imgBox img {
position: absolute;
top:0; left:0; right:0; bottom:0;
margin: auto;
width: 100%;
height: 100%;
cursor: pointer;
animation: in 5s infinite alternate;
}
.imgBox img:hover { animation-play-state: paused; }
.footBox { height: 100px; display: flex; flex-direction: row; gap: 8px; justify-content: center; }
.footBox img { width: 100px; height: 100px; border-radius: 50%; cursor: pointer; opacity: 0.8; }
.footBox img:hover { opacity:1; }
.wyyyy { position: absolute;left:-45px; top:480px; clip-path: circle(33px at 43px 43px); opacity: 0.8;z-index: 6; }
@keyframes in {
50% { transform: rotate(0deg) scale(1,1); }
100% { transform: rotate(360deg) scale(0.01,0.01); }
}
</style>

<div class="paBox">
<iframe class="wyyyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=1464868771&auto=1&height=66"></iframe>
<div class="imgBox"><img id="bigpic" src="https://638183.freep.cn/638183/Pic/2022/tk.jpg" alt="" /></div>
<div class="footBox">
<img id="img1" src="https://638183.freep.cn/638183/Pic/2022/tk6.jpg" alt="" />
<img id="img2" src="https://638183.freep.cn/638183/Pic/2022/tk5.jpg" alt="" />
<img id="img3" src="https://638183.freep.cn/638183/Pic/2022/tk4.jpg" alt="" />
<img id="img4" src="https://638183.freep.cn/638183/Pic/2022/tk3.jpg" alt="" />
<img id="img5" src="https://638183.freep.cn/638183/Pic/2022/tk2.jpg" alt="" />
<img id="img6" src="https://638183.freep.cn/638183/Pic/2022/tk1.jpg" alt="" />
</div>
</div>

<script>
var bigpic = document.getElementById('bigpic');
function showpic(id) { bigpic.src = document.getElementById(id).src; }
function auplay(){
var num = Math.floor(Math.random()*5)+1;
showpic('img'+num);
}
setInterval(auplay, 10000)
</script>