|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<style>
.mama { width: 768px; height: 560px; background: #fff; box-shadow: 2px 2px 4px #333; position: relative; }
.wrap { left: 60px; top: 30px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: #fff; background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.15)); background-repeat: no-repeat; background-size: 0% 100%; position: absolute; display: flex; cursor: pointer; }
.ball { position: relative; width: 20px; height: 20px; 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,255,255,.5), rgba(0,0,255,.1)); }
@keyframes goRight { from { transform: translate(0) rotate(0); } to {transform: translate(100px) rotate(1turn); } }
@keyframes goLeft { from { transform: translate(100px) rotate(0); } to {transform: translate(0) rotate(-1turn); } }
</style>
<div class="mama">
<img src="https://pic.imgdb.cn/item/6296b6aa094754312934093c.jpg">
<div class="wrap"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=551339740.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<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: 5}).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[total].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 | 威望 +150 |
金钱 +300 |
经验 +150 |
收起
理由
|
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 东篱闲人
| + 30 |
+ 60 |
+ 30 |
很给力! |
 转转
| + 20 |
+ 40 |
+ 20 |
赞一个! |
查看全部评分
|
发表于 2022-6-1 08:52
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-6-1 09:22
发表于 2022-6-1 10:10
发表于 2022-6-1 13:32
