绿叶清舟 发表于 2022-8-20 19:23

【末伏消暑】六七天 诗画共清欢

<style>
#papa { margin: auto; left: -250px; top: 80px;width: 1100px; height: 700px; background: #9dd1c3 url('https://pic.imgdb.cn/item/6300c44c16f2c2beb1dc7c87.jpg') 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(#9dd1c3,#2ea280,#9dd1c3,#2ea280,#9dd1c3); 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: #a2d697; 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>
<BR><BR><BR><BR><BR><BR>
<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=1846538301.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-20 19:43

清舟朋友晚上好！画面淡雅，色调清新。好。

醉美水芙蓉 发表于 2022-8-20 19:50

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

梦油 发表于 2022-8-20 19:43
清舟朋友晚上好！画面淡雅，色调清新。好。

梦油晚上好，就凑个数的了

绿叶清舟 发表于 2022-8-20 19:52

醉美水芙蓉 发表于 2022-8-20 19:50
欣赏清舟美女佳作！

谢谢芙蓉晚上好

千羽 发表于 2022-8-20 20:05

爽目的画面，播放器好看，歌儿也好听{:4_187:}

红影 发表于 2022-8-20 20:13

诗画共清欢，这图图制作真漂亮，清舟好雅致{:4_187:}

加林森 发表于 2022-8-20 20:17

好啊，一下全部玩完了。清舟厉害！{:4_199:}

马黑黑 发表于 2022-8-20 20:22

光盘改装的和帖子很配套。粥粥厉害

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

马黑黑 发表于 2022-8-20 20:22
光盘改装的和帖子很配套。粥粥厉害

想搞渐变的可是看到的颜色到真实出来效果谐调有难度啊，就改成了二个颜色的了

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

加林森 发表于 2022-8-20 20:17
好啊，一下全部玩完了。清舟厉害！

玩了二天的了

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

红影 发表于 2022-8-20 20:13
诗画共清欢，这图图制作真漂亮，清舟好雅致

正好找到这个曲，虽然没听懂唱点啥，但完成任务了{:4_189:}

马黑黑 发表于 2022-8-20 20:28

绿叶清舟 发表于 2022-8-20 20:26
想搞渐变的可是看到的颜色到真实出来效果谐调有难度啊，就改成了二个颜色的了

都可以的

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

千羽 发表于 2022-8-20 20:05
爽目的画面，播放器好看，歌儿也好听

千羽晚上好，交作业的只能这么玩了{:4_189:}

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

马黑黑 发表于 2022-8-20 20:28
都可以的

取二个色的改起来方便了

加林森 发表于 2022-8-20 20:32

绿叶清舟 发表于 2022-8-20 20:27
玩了二天的了

厉害！{:5_116:}

梦油 发表于 2022-8-20 20:39

绿叶清舟 发表于 2022-8-20 19:51
梦油晚上好，就凑个数的了

清舟朋友总是这么谦虚。

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

梦油 发表于 2022-8-20 20:39
清舟朋友总是这么谦虚。

哪里有啊，不怕发胖的了

樵歌 发表于 2022-8-20 21:03

清雅无边，小资文艺范！大才一枚{:4_187:}

马黑黑 发表于 2022-8-20 21:08

绿叶清舟 发表于 2022-8-20 20:29
取二个色的改起来方便了

懒人做法{:5_117:}
页: [1] 2
查看完整版本: 【末伏消暑】六七天 诗画共清欢