用CSS3动画效果写出一个立体小水滴

最新推荐文章于 2024-09-27 17:50:57 发布

我喝牛奶长大

最新推荐文章于 2024-09-27 17:50:57 发布

阅读量555

点赞数 1

本文链接：https://blog.csdn.net/zzy_999/article/details/127758145

版权

本文介绍如何利用CSS3的动画效果创建一个立体小水滴。通过结合使用div元素、伪类before和after，以及外部资源提供的自定义圆角工具，详细阐述了实现小水滴形状和动态效果的步骤。

摘要由CSDN通过智能技术生成

小水滴非常简单，其实可以直接用一个div+before after就可以写出来，个人是用三个div写的，现在给大家看一下吧！！！

1.先建立一个div div里面包括两个div作为2个小泡泡

<body>
    <div class="water">
        <div class="water1"></div>
        <div class="warer2"></div>
    </div>
</body>

2.给body div加上css样式不懂得可以看看注释

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: #00a8ff;
        }

        .water {
            width: 200px;
            height: 200px;
            margin: 200p