学习滚珠播放器
本帖最后由 醉美水芙蓉 于 2022-6-2 19:36 编辑 <br /><br /> <div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1591580">
<style>
.mama { left: -202px; width: 1000px; height: 563px; background: teal url('https://s1.ax1x.com/2022/06/02/XNSRM9.jpg') no-repeat; box-shadow: 2px 2px 4px #333; position: relative; }
.mama::before, .mama::after { position: absolute; content: ''; width: 100px; height: 100px; left: 20px; top: 20px; border-radius: 50%; background: white; }
.wrap { left: 540px; top: 520px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: tan; 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: 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,0,0,.5), rgba(255,0,0,.6)); }
@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">
<div class="wrap"></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=6990232&.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<div style="MARGIN-TOP: -324px; MARGIN-LEFT: 0px"><marquee height="324" scrollamount="1" scrolldelay="30" style="width: 100%; height: 324px;"><img alt="一个人不同移动速度移动&醉美水芙蓉 " src=" https://s1.ax1x.com/2022/06/02/XNSc24.png" title="一个人不同移动速度移动- 湖心&醉美水芙蓉 " width="240" /></marquee></div>
</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.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>
</td></tr></table> 水芙蓉也是用的浅色系的滚珠，做得漂亮，点赞{:4_187:} 水芙蓉也制作出来了，真好！ 图片一直打不开 水芙蓉是没有看懂我前面的回帖
前面我已经说了花潮论坛是升级安全模式的https论坛（站长花钱升级的） 带S的链接 其实现在升级论坛已经不少了，包括许多免费上传的都是https的链接了，现在你里面的链接是http开头的，没有S的，要兼容模式可以看见，但最新的W10系统浏览器没有兼容模式的，所以看不见你这些不带S的链接图片，以后你上传链接最好是https的，而且我免费上传图片网站链接已经发你过的
这样你理解了吧，祝你玩的开心。 马黑黑 发表于 2022-6-1 23:14
图片一直打不开
小辣椒 发表于 2022-6-2 11:36
图片还是老样子，包括你的签名 马黑黑 发表于 2022-6-2 12:15
图片还是老样子，包括你的签名
这个是水芙蓉的我截图你看看 小辣椒 发表于 2022-6-2 12:19
这个是水芙蓉的我截图你看看
反正就是看不到图 马黑黑 发表于 2022-6-2 12:32
反正就是看不到图
是的，看不见 小辣椒 发表于 2022-6-2 12:54
是的，看不见
图片应该是受保护的 小辣椒 发表于 2022-6-2 11:36
谢谢小辣椒我知道了！ 马黑黑 发表于 2022-6-2 12:32
反正就是看不到图
黑黑啦换图片地址了！@马黑黑 醉美水芙蓉 发表于 2022-6-2 19:38
黑黑啦换图片地址了！@马黑黑
哎呀，太漂酿啦{:4_187:} 马黑黑 发表于 2022-6-2 20:01
哎呀，太漂酿啦
是黑黑老师的播放器漂亮！ 醉美水芙蓉 发表于 2022-6-2 20:03
是黑黑老师的播放器漂亮！
风景太美，菇凉也不错
页:
[1]