醉美水芙蓉 发表于 2022-8-15 22:57

【末伏消暑】第一天 闲---闲庭絮

本帖最后由 醉美水芙蓉 于 2022-8-15 22:56 编辑 <br /><br /><style>
      #papa {left: -214px; display: grid; margin: auto; display: grid; place-items: center; width: 1024px; height: 640px; background: url('https://s1.ax1x.com/2022/08/04/vmmVzj.jpg') no-repeat center/cover; position: relative; }
      #canv { position: absolute; }
      #disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; 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: 60px; bottom: 10px;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">闲庭絮</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://www.qqmc.com/up/kwlink.php?id=143381134&.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://s1.ax1x.com/2022/08/15/vwS3eU.png',
      'https://s1.ax1x.com/2022/08/15/vwSlLT.png',
      'https://s1.ax1x.com/2022/08/15/vwSQyV.jpg',
      'https://s1.ax1x.com/2022/08/15/vwSMQ0.jpg',
      'https://s1.ax1x.com/2022/08/15/vwSuzq.jpg',
      'https://s1.ax1x.com/2022/08/15/vwSnWn.jpg',
      'https://s1.ax1x.com/2022/08/15/vwSmJs.jpg',
      'https://s1.ax1x.com/2022/08/15/vwSeij.jpg',
      'https://s1.ax1x.com/2022/08/15/vwSVoQ.jpg',
      'https://s1.ax1x.com/2022/08/15/vwSEdg.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>

马黑黑 发表于 2022-8-15 23:46

{:4_199:}

醉美水芙蓉 发表于 2022-8-16 06:57

马黑黑 发表于 2022-8-15 23:46


黑黑老师早上好！

马黑黑 发表于 2022-8-16 07:08

醉美水芙蓉 发表于 2022-8-16 06:57
黑黑老师早上好！

早呀

小星世龙 发表于 2022-8-16 08:37

精彩，漂亮，点赞！

樵歌 发表于 2022-8-16 09:28

学得好快呀，真冰雪呵{:4_187:}

醉美水芙蓉 发表于 2022-8-16 11:13

小星世龙 发表于 2022-8-16 08:37
精彩，漂亮，点赞！

谢谢朋友支持！

醉美水芙蓉 发表于 2022-8-16 11:13

樵歌 发表于 2022-8-16 09:28
学得好快呀，真冰雪呵

谢谢樵歌支持鼓励！

红影 发表于 2022-8-16 11:55

水芙蓉学得真快，制作漂亮。小图好像有几张有点变形呢{:4_173:}

醉美水芙蓉 发表于 2022-8-16 17:43

本帖最后由 醉美水芙蓉 于 2022-8-16 17:44 编辑

红影 发表于 2022-8-16 11:55
水芙蓉学得真快，制作漂亮。小图好像有几张有点变形呢
红影美女看得好仔细！

红影 发表于 2022-8-17 20:39

醉美水芙蓉 发表于 2022-8-16 17:43
红影美女看得好仔细！

好帖子影子总忍不住仔细欣赏的呢{:4_187:}

沐风 发表于 2022-8-17 22:40

好亮眼。

醉美水芙蓉 发表于 2022-8-18 21:02

沐风 发表于 2022-8-17 22:40
好亮眼。

谢谢朋友支持！
页: [1]
查看完整版本: 【末伏消暑】第一天 闲---闲庭絮