【末伏消暑】第三天【休】休闲海边玩
<style>#papa { margin: auto; display: grid; place-items: center;left: -220px; width: 1024px; height: 640px; top: 150px;background: url('https://wj.zp68.com/lxx/yunhua/2022/08/16/bj.jpg') no-repeat center/cover; position: relative; }
#canv { position: absolute; }
#disc { position: absolute; width: 50px; height: 50px; left: 50px; bottom: 25px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 120px; bottom: 30px;font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">沙发音乐 - 休闲 Maestro</span>
<canvas id="canv"></canvas>
<span id="disc"></span>
</div>
<script type="text/javascript">
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let r = 10, speed = 0.5, idx = 0;
let w = canv.width = 500, h = canv.height = 600;
let ctx = canv.getContext('2d');
let images = new Array(), aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1948069358.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
function preload() {
for (j = 0; j < preload.arguments.length; j++) {
images = new Image()
images.src = preload.arguments
}
}
preload(
'https://wj.zp68.com/lxx/yunhua/2022/08/16/01.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/02.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/03.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/04.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/05.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/06.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/07.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/08.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/09.jpg',
'https://wj.zp68.com/lxx/yunhua/2022/08/16/10.jpg',
)
idx = num(0, images.length - 1);
(function draw() {
ctx.clearRect(0, 0, w, h);
ctx.save();
ctx.beginPath();
ctx.arc(w / 2, h / 2, r, 0, Math.PI*2);
ctx.closePath();
ctx.fillStyle = "transparent";
ctx.fill();
ctx.clip();
ctx.drawImage(images, 0, 0, w, h);
ctx.restore();
r += speed;
if (r > 250 || r <= 0) speed = -speed;
if(r <= 0) idx = num(0, images.length - 1);
requestAnimationFrame(draw);
})();
</script>
<br><br><br><br><br><br><br><br><br><br> 今天只有一天的作业{:4_189:} 谢谢黑黑的教程分享@马黑黑 这么多美女呀，赏心悦目{:4_187:} 又是高科技的感觉，小辣椒棒棒哒{:4_185:} 色调搭配也很美呢{:4_187:} 海滩美女集，亲爱的制作好美{:4_187:} 千羽 发表于 2022-8-17 19:41
这么多美女呀，赏心悦目
千羽来了，这个是海边美女泳装展示{:4_170:} 千羽 发表于 2022-8-17 19:42
又是高科技的感觉，小辣椒棒棒哒
黑黑的教程做的，千羽这个可以秒做的，不用动脑子 千羽 发表于 2022-8-17 19:43
色调搭配也很美呢
全部搜索的图片，直接用{:4_189:} 红影 发表于 2022-8-17 19:54
海滩美女集，亲爱的制作好美
亲爱的，又是淘宝卖泳衣的店找的图片 小辣椒 发表于 2022-8-17 19:56
千羽来了，这个是海边美女泳装展示
找喜欢的美女图很费时间的{:4_181:} 小辣椒 发表于 2022-8-17 19:57
黑黑的教程做的，千羽这个可以秒做的，不用动脑子
小辣椒是会者不难，俺做就会乱码{:4_203:} 小辣椒 发表于 2022-8-17 19:58
全部搜索的图片，直接用
用得挺好的{:4_173:} 千羽 发表于 2022-8-17 20:02
小辣椒是会者不难，俺做就会乱码
千羽 你就直接套用，我也是自己做不好的 千羽 发表于 2022-8-17 20:01
找喜欢的美女图很费时间的
你的都是特别漂亮的，我的搜索来就用了 小辣椒 发表于 2022-8-17 20:03
千羽 你就直接套用，我也是自己做不好的
嗯，下个决心哈{:4_173:} 小辣椒 发表于 2022-8-17 20:03
你的都是特别漂亮的，我的搜索来就用了
能顺眼就行{:4_173:} 千羽 发表于 2022-8-17 20:03
嗯，下个决心哈
这个真不要决心，就是时间，我现在做要晚上下了才可以去做，所以感觉会累，白天不能玩 千羽 发表于 2022-8-17 20:02
用得挺好的
图图真不能和你比的