小辣椒 发表于 2022-8-17 20:54

【末伏消暑】第四天【伏】三伏天

<style>
   #papa { margin: auto; display: grid; place-items: center; left: 10px; top: 120px;width: 760px; height: 842px; background: url('https://wj.zp68.com/lxx/yunhua/2022/08/11/001.jpg') no-repeat center/cover; box-shadow: 3px 3px 10px #000; position: relative; overflow: hidden; }
#disc { position: absolute; width: 40px; height: 40px; left: 420px; top: 440px; 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: 480px; top: 440px;font: bold 22px / 40px sans-serif; color:#222;; text-shadow: 2px 2px 4px #fff }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <span id="disc"></span>
      <span id="lrcbox">小提琴--茉莉花</span>
</div>

<script>

let aud = new Audio();      
aud.src = 'https://wj.zp68.com/lxx/yunhua/20200721/09.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');

</script>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-8-17 20:56

完成作业（伏）

红影 发表于 2022-8-17 22:17

这个好，完成作业的同时，长知识了。亲爱的真棒{:4_187:}

小辣椒 发表于 2022-8-18 20:36

红影 发表于 2022-8-17 22:17
这个好，完成作业的同时，长知识了。亲爱的真棒

亲爱的，偷懒就这样练出来的{:4_189:}

红影 发表于 2022-8-18 22:02

小辣椒 发表于 2022-8-18 20:36
亲爱的，偷懒就这样练出来的

能想到并去收集相关知识，也是很棒的呢{:4_187:}

小辣椒 发表于 2022-8-18 22:15

红影 发表于 2022-8-18 22:02
能想到并去收集相关知识，也是很棒的呢

这个直接搜索，百度一下就在了

红影 发表于 2022-8-19 16:52

小辣椒 发表于 2022-8-18 22:15
这个直接搜索，百度一下就在了

但是不一定每个人都能想到这个呢{:4_204:}
页: [1]
查看完整版本: 【末伏消暑】第四天【伏】三伏天