云上争霸（胡闹一下）
<style>.zhengba {
left: -342px;top:100px;
width: 1280px;
height: 720px;
background: url('https://pic.imgdb.cn/item/62981d760947543129ac33f8.jpg') no-repeat;
position: relative;
box-shadow:00 8px #333;
border-radius:12px;
}
.hy {
left: 600px;top:160px;
width: 456px;
height: 330px;
background: url('https://pic.imgdb.cn/item/62981cb90947543129ab74cc.gif') no-repeat;
position: relative;
}
.wrap { left: 76px; top: 20px; width: 300px; height: 15px; box-shadow: 1px 1px 2px #31BDDF; border-radius: 2px; background-color: #A7E3F1; background-image: linear-gradient(rgba(255,0,0,.25), rgba(255,0,0,.15)); background-repeat: no-repeat; background-size:0% 100%; position: absolute; display: flex; cursor: pointer; }
.ball { position: relative; width: 15px; height: 15px; border-radius: 50%; display: block; }
.ball::before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: 50%;
background: radial-gradient(at 35% 40%, rgba(255,0,0,.5), rgba(255,0,0,.6)); }
@keyframes goRight { from { transform: translate(0) rotate(0); } to {transform: translate(150px) rotate(1turn); } }
@keyframes goLeft { from { transform: translate(150px) rotate(0); } to {transform: translate(0) rotate(-1turn); } }
.txtBox {
width: fit-content;
color: #113DEE;
font: bold 4.2em sans-serif;
text-shadow: 1px 1px 2px gray, 2px 2px 4px gray;
-webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.35));
position: absolute;
left: 90px;
top: 80px;
}
.zhengba img {
position: absolute;
width: 500px;
height: 220px;
animation: walk 40s linear infinite;
}
@keyframes walk {
0%,100% { transform: rotate(-10deg); left: 400px;top:460px; }
50% { transform: rotate(0deg); left: 720px;top:480px; }
</style>
<div class="zhengba">
<div class="txtBox">云上争霸</div>
<img src="https://pic.imgdb.cn/item/6299f80c0947543129dc7fe4.png" alt="" />
<div class="hy">
<div class="wrap"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5052065.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<div style="position: absolute; left:-160px; top: -80px; width:451px; ">
<img alt="" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif"/></div>
</div><br><br><br><br><br><br>
<script>
let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let step = -1, dir = 'goRight';
let gcolor = () => '#' + Math.random().toString(16).substr(-6), prog = (tt, cc) => 100 * cc / tt;
Array.from({length: 10}).forEach((ele) => {
ele = document.createElement('span');
ele.className = 'ball';
ele.setAttribute('style','background: linear-gradient(120deg, ' +gcolor() + ', ' + gcolor() + ')');
wrap.appendChild(ele);
});
let ball = document.querySelectorAll('.ball'), total = ball.length;
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
function ballgo() {
total = total + step;
if(total < 0) {
step = 1;
total = 0;
dir = 'goLeft';
}
if(total >= ball.length) {
step = -1;
total = ball.length - 1;
dir = 'goRight';
}
ball.style.animation = dir + ' 2s linear forwards';
wrap.style.transform = dir == 'goRight'? 'rotate(1deg)' : 'rotate(-1deg)';
let timer = setTimeout(ballgo, 2000);
}
aud.addEventListener('timeupdate', () => wrap.style.backgroundSize = prog(aud.duration, aud.currentTime) + '%, 100%');
ballgo();
</script> 今天过节了，胡闹一下，大家一起开心{:4_187:}
想想队长也不会生气，就拿队长的头像争霸一下吧{:4_173:} 让那个天平和的转动个云朵的移动都去配合了一下黑黑的小球播放器的速度。
自是动图像去配合代码的速度很难，试了一下，用19.9秒去配合，最开始可以，到后来转的次数多了，还是有差异{:4_173:}@马黑黑 这个好玩 倾斜的角度其实是可以加大的 红影和加加的体重差不多。。。。{:5_116:} 马黑黑 发表于 2022-6-3 20:37
倾斜的角度其实是可以加大的
那样和动图的无法配合就更明显了呀，本来动图的时间我设置的跟代码一样的时间间隔，不知道为什么总差那么一点点，我是说那个天平。云朵也是代码驱动的，配合上倒还好。 东篱闲人 发表于 2022-6-3 20:38
红影和加加的体重差不多。。。。
明明是比武功好不好，谁比体重了{:4_173:} 红影 发表于 2022-6-3 20:39
那样和动图的无法配合就更明显了呀，本来动图的时间我设置的跟代码一样的时间间隔，不知道为什么总差那么 ...
多测试几下就知道怎么做了 也真巧，我也做了一个和云有关的帖子 红影 发表于 2022-6-3 20:40
明明是比武功好不好，谁比体重了
都160多斤。。。。{:5_116:} 哈哈~~~亲爱的，这个太好玩了{:4_178:} 有创意，元素结合的好，耐欣赏，大赞的{:4_199:} 红影 发表于 2022-6-3 20:25
今天过节了，胡闹一下，大家一起开心
想想队长也不会生气，就拿队长的头像争霸一下吧
好玩好玩，肯定我现在打不过你的，你都成大熊猫了，找还没有变的。。{:4_170:} 有创意{:4_199:} 也没见争出什么结果，霸主还未产生 跷跷板 {:4_178:}大家来玩 马黑黑 发表于 2022-6-3 20:41
多测试几下就知道怎么做了
本来就是试了好几个动图时间，包括18秒和19秒的，最后觉得差0.1秒差不多，不过运行时间一长，还是有不同步。