大地之歌（纯css水滴学习）
<style>
.waiDiv { position: relative; left:-216px; top:120px; width: 1024px; height: 586px; background-image: url('https://pic.imgdb.cn/item/623dc5ad27f86abb2ad00142.jpg'); box-shadow: 4px 4px 5px #888; border-radius:12px; padding:20px 0;opacity: 0.8;background-repeat:no-repeat;}
.water {
left: 300px;top:243px;position: relative;
width: 150px;
height: 150px;
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 9s 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%;}
}
/* 变色文本 */
.txtBg {
position: absolute;
top: 60px;
left: 80px;
font-size: 4rem;
color: transparent;
width: 500px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: 500px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
/* 文本变色动画 */
@keyframes chgc {
from { background-position: -500px 0; }
to { background-position: 0 0; }
</style>
<div class="waiDiv">
<div class="water"></div>
<div class="txtBg">大地之歌</div>
<div style="position: absolute; left:340px; top: 260px; width:72px;">
<img alt="" src="https://pic.imgdb.cn/item/623dcc0b27f86abb2a00a1f4.gif"/></div>
<audio src="http://music.163.com/song/media/outer/url?id=1897496901.mp3" loop="loop"
autoplay="autoplay" ></audio>
</div>
<br><br><br><br><br><br><br><br><br> 在水滴里放了条小鱼@马黑黑{:4_173:} 这个水滴用到这里，太绝妙了，一个字，妙不可言 马黑黑 发表于 2022-3-25 22:35
这个水滴用到这里，太绝妙了，一个字，妙不可言
是黑黑的水滴美妙，活灵活现的，特别好看{:4_187:} 红影 发表于 2022-3-25 22:44
是黑黑的水滴美妙，活灵活现的，特别好看
素材差不多的，比如木材吧，我能做的是猪栏，你能做的是一件出站金星的艺术品 马黑黑 发表于 2022-3-25 22:45
素材差不多的，比如木材吧，我能做的是猪栏，你能做的是一件出站金星的艺术品
这个还是不够细致，比如旁边那个大水珠应该去掉，都换成你的动态水珠才更好呢。急着想做出来，就没去管那个{:4_173:} 红影 发表于 2022-3-25 22:57
这个还是不够细致，比如旁边那个大水珠应该去掉，都换成你的动态水珠才更好呢。急着想做出来，就没去管那 ...
先有个效果有个态度 厉害了啊，红影这就制作出来了啊。{:4_199:} 没有找到播放器呢？ 太奇妙了，怎么把小鱼儿放进去的，师妹好厉害{:4_187:} 哈哈 红影这个制作好有创意， 音画融合的一流 真棒，周末快乐！
{:4_204:}{:4_199:} 马黑黑 发表于 2022-3-25 23:44
先有个效果有个态度
是啊，然后再想想还能用到哪里{:4_173:} 加林森 发表于 2022-3-25 23:49
厉害了啊，红影这就制作出来了啊。
看黑黑的那个动态水滴非常有趣，就做个帖子试试{:4_173:} 加林森 发表于 2022-3-25 23:53
没有找到播放器呢？
嗯，没放按钮，找不到好的，用过的又不想用。找了个差不多的，却不是透明，自己去抠图总有白边，扣不干净，看看不行，就没弄{:4_173:} 红影 发表于 2022-3-26 13:12
是啊，然后再想想还能用到哪里
实用至上 红影 发表于 2022-3-26 13:14
嗯，没放按钮，找不到好的，用过的又不想用。找了个差不多的，却不是透明，自己去抠图总有白边，扣不干净 ...
哦，这样的啊。 红影 发表于 2022-3-26 13:13
看黑黑的那个动态水滴非常有趣，就做个帖子试试
这个帖制作得漂亮。挺不错的。{:4_199:} 樵歌 发表于 2022-3-26 10:33
太奇妙了，怎么把小鱼儿放进去的，师妹好厉害
那个小鱼儿只是个动图，那个水滴才厉害，是纯CSS模拟的呢，黑黑带来的效果{:4_173:} 大猫咪 发表于 2022-3-26 12:41
哈哈 红影这个制作好有创意， 音画融合的一流 真棒，周末快乐！
谢谢猫猫，又找到了个好玩的{:4_173:} 马黑黑 发表于 2022-3-26 13:42
实用至上
再使用里学习呀{:4_173:}