绿叶清舟 发表于 2022-8-6 19:51

【中伏消暑】第十一天 天池

本帖最后由 绿叶清舟 于 2022-8-6 19:53 编辑 <br /><br /><style>
#papa { margin: auto; left: -239px; top: 80px;width: 1080px; height: 608px; background: #985b0a url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fq_70%2Fimages03%2F20200818%2Ffa1d1758add641a0af8833165b31892b.png&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662377807&t=2a578d69c51d5e89b62ba2750bbe4b45') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }

#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 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; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: #D0EBEB; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>

<div id="papa">
      
      <div id="tit">天池 - 李玉刚</div>
      <div id="disc"></div>
</div>

<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();

aud.src = 'http://music.163.com/song/media/outer/url?id=132327.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');

motion();

function motion() {
      moveX += stepX;
      moveY += stepY;
      mama.style.left = moveX + 'px';
      mama.style.top = moveY + 'px';
      requestAnimationFrame(motion);
      if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
      if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>

加林森 发表于 2022-8-6 20:24

清舟制作得真清爽，真漂亮！{:4_199:}

绿叶清舟 发表于 2022-8-6 20:47

加林森 发表于 2022-8-6 20:24
清舟制作得真清爽，真漂亮！

谢谢队长，晚上好

加林森 发表于 2022-8-6 21:06

绿叶清舟 发表于 2022-8-6 20:47
谢谢队长，晚上好

不客气的。清舟晚上好！{:4_176:}

马黑黑 发表于 2022-8-6 21:16

景色很美。

红影 发表于 2022-8-6 21:35

好美丽的天池，看着特别清新养眼{:4_187:}

樵歌 发表于 2022-8-6 21:41

清爽漂亮美！这池真大{:4_187:}
页: [1]
查看完整版本: 【中伏消暑】第十一天 天池