论坛 › 时光如水 › 水色TO鱼儿

绿叶清舟 发表于 2023-2-14 17:26

水色TO鱼儿

<style>
#papa { margin: auto; left: -250px; top: 80px;width: 1100px; height: 700px; background: #051850 url('https://pic.imgdb.cn/item/63e87cb04757feff33988c5b.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }

#disc { position: absolute; width: 40px; height: 40px; left: 20px; top: 635px; background: conic-gradient(#000000,#1118a5,#000000,#1118a5,#000000); 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: #1d6ace; 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); } }

.water {
left: 838px;
top:40px;
position: relative;
width: 120px;
height: 120px;
box-sizing: border-box;
border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;
box-shadow: inset 10px 20px 30px rgba(0,0,0,.5),10px 10px 20px rgba(0,0,0,.3),15px 15px 30px rgba(0,0,0,.5),inset -10px -10px 15px rgba(255,255,254,.83);
animation: wmv 3s linear infinite;
}
@keyframes wmv{
20% { border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%; }
40% { border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%; }
60% { border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;}
80% { border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;}
</style>

<div id="papa">
      <div class="water"></div>
      <div id="tit">TO鱼儿，预祝生日快乐</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=81886.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>

庶民 发表于 2023-2-14 18:27

意境深远，给人无限遐想。

鱼儿 发表于 2023-2-14 19:03

好漂亮的颜色啊！{:6_250:}

梦油 发表于 2023-2-14 20:15

色泽鲜艳明净，水乡的景色太美了。

樵歌 发表于 2023-2-14 20:48

有谁不知道江南啥味道，就来此贴品{:4_178:}

樵歌 发表于 2023-2-14 21:16

题“水色”
清音入水夜灯红，
华月无声照孤篷。
坐饮江南贪美色，
醒来欲与梦中同。

红影 发表于 2023-2-15 09:43

鱼儿要生日了？看到清舟说的是预祝。到底哪天啊{:4_204:}

红影 发表于 2023-2-15 09:45

这个水滴效果好美啊，应该是挺久以前的吧。做在帖子里有惊人的美。清舟的帖子好棒，鱼儿收礼开心{:4_187:}

红影 发表于 2023-2-15 09:48

鱼儿 发表于 2023-2-14 19:03
好漂亮的颜色啊！

跟祝鱼儿生日快乐{:5_166:}{:6_244:}

海笑 发表于 2023-2-15 16:23

欣赏老师佳作！

小九 发表于 2023-2-15 16:34

这个水滴的特效好美！ 预祝鱼儿生日快乐！{:5_166:}{:4_187:}

醉美水芙蓉 发表于 2023-2-15 17:24

鱼儿 发表于 2023-2-15 19:10

红影 发表于 2023-2-15 09:48
跟祝鱼儿生日快乐

谢谢{:7_273:}

鱼儿 发表于 2023-2-15 19:12

小九 发表于 2023-2-15 16:34
这个水滴的特效好美！ 预祝鱼儿生日快乐！

谢谢：）{:4_183:}

鱼儿 发表于 2023-2-15 19:13

红影 发表于 2023-2-15 09:43
鱼儿要生日了？看到清舟说的是预祝。到底哪天啊

还提前挺多的{:4_173:}

绿叶清舟 发表于 2023-2-15 20:21

鱼儿 发表于 2023-2-15 19:13
还提前挺多的

就怕一晃日子过了{:4_189:}现在老了日子晃得特别快的

红影 发表于 2023-2-15 21:29

鱼儿 发表于 2023-2-15 19:10
谢谢

生在春天的鱼儿，日子真好{:4_187:}

红影 发表于 2023-2-15 21:30

鱼儿 发表于 2023-2-15 19:13
还提前挺多的

到底哪天啊，鱼儿说一下呗，可以登记在论坛里，以后就不会忘了{:4_173:}

鱼儿 发表于 2023-2-15 23:19

绿叶清舟 发表于 2023-2-15 20:21
就怕一晃日子过了现在老了日子晃得特别快的

懂！我也干过这种事，表妹的生日提前好几天就想着，当天给忘了，到第二天想起来了{:4_189:}

鱼儿 发表于 2023-2-15 23:21

红影 发表于 2023-2-15 21:30
到底哪天啊，鱼儿说一下呗，可以登记在论坛里，以后就不会忘了

27号

查看完整版本: 水色TO鱼儿