论坛 › 欢乐水吧 › 大水珠

马黑黑 发表于 2022-3-25 12:43

大水珠

<style>
        .waiDiv { width:100%; min-height: 300px; padding:20px 0; background: rgba(40,134,241,.75); }
        .water {
                margin: auto;
                width: 300px;
                height: 300px;
                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%;}
        }
</style>

<div class="waiDiv">               
        <div class="water"></div>
</div>

马黑黑 发表于 2022-3-25 12:44

本帖最后由 马黑黑 于 2022-3-25 12:48 编辑

代码分享：


<style>
.waiDiv { width:100%; min-height: 300px; padding:20px 0; background: rgba(40,134,241,.75); }
.water {
margin: auto;
width: 300px;
height: 300px;
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%;}
}
</style>
<div class="waiDiv">
<div class="water"></div>
</div>

红影 发表于 2022-3-25 13:29

哇，这大水珠还会动的，纯代码动画，太惊艳了{:4_199:}

红影 发表于 2022-3-25 13:39

仅仅用border-radius和box-shadow的变化就能弄出个大水珠，太厉害了{:4_199:}

来看你 发表于 2022-3-25 14:14

看着想用手指戳一下 {:4_189:}

加林森 发表于 2022-3-25 14:29

老黑厉害啊，又整出个新的教程啊。{:4_199:}

马黑黑 发表于 2022-3-25 18:44

红影 发表于 2022-3-25 13:29
哇，这大水珠还会动的，纯代码动画，太惊艳了

不知道有木有用

马黑黑 发表于 2022-3-25 18:45

加林森 发表于 2022-3-25 14:29
老黑厉害啊，又整出个新的教程啊。

好玩吧

绿叶清舟 发表于 2022-3-25 20:51

这么大一个

红影 发表于 2022-3-25 21:11

马黑黑 发表于 2022-3-25 18:44
不知道有木有用
做在帖子里肯定很有趣{:4_173:}

马黑黑 发表于 2022-3-25 21:20

红影 发表于 2022-3-25 21:11
坐在帖子里肯定很有趣

我觉得可以试一试

马黑黑 发表于 2022-3-25 21:21

来看你 发表于 2022-3-25 14:14
看着想用手指戳一下

{:4_189:}

马黑黑 发表于 2022-3-25 21:21

绿叶清舟 发表于 2022-3-25 20:51
这么大一个

一般大

绿叶清舟 发表于 2022-3-25 21:24

要不要哭个{:4_189:}

红影 发表于 2022-3-25 22:37

马黑黑 发表于 2022-3-25 21:20
我觉得可以试一试

已经做了小水珠，还放了一条小鱼进去{:4_189:}

马黑黑 发表于 2022-3-25 22:39

红影 发表于 2022-3-25 22:37
已经做了小水珠，还放了一条小鱼进去

看到了，你太腻害辣{:4_199:}

马黑黑 发表于 2022-3-25 22:42

绿叶清舟 发表于 2022-3-25 21:24
要不要哭个

你说泪滴呀？等下我做一个给你，你哭给我看看{:4_170:}

红影 发表于 2022-3-25 22:48

马黑黑 发表于 2022-3-25 22:39
看到了，你太腻害辣

这个水珠实在是很美的，我在想，是不是在别的场景里还能再试试{:4_173:}

马黑黑 发表于 2022-3-25 22:50

红影 发表于 2022-3-25 22:48
这个水珠实在是很美的，我在想，是不是在别的场景里还能再试试

可以的。可是我做好后，我家丫头说好丑{:4_170:}

红影 发表于 2022-3-25 23:01

马黑黑 发表于 2022-3-25 22:50
可以的。可是我做好后，我家丫头说好丑

放在帖子里好美的呢，非常喜欢这个水滴{:4_187:}

查看完整版本: 大水珠