css动态水滴效果

css动态水滴效果

---

效果演示：

1.使用到的属性：

box-shadow

如何达到立体的效果？

设置内阴影，外阴影，的已经颜色来达到最终的立体效果

@keyframes action

上述代码在css中具有意义，它代表一种动画定义，即定义一个名为“action”的动画，它可以让元素在持续时间内以某种方式来变化。 具体的变化形式可以通过在keyframes中定义的各个“关键帧”来定义，这些关键帧可以让元素在指定的时间点发生不同的变化效果。

animation

CSS animation意味着使用CSS在网页上创建动态效果，而不必使用JavaScript或Flash。它允许用户在网页上创建有趣的动画，从自定义过渡到多个状态变换，从而让网页变得更有趣。

2.需要注意的点

不同的浏览器对某些html标签是具有一些初始设置，我们需要先把他清楚掉。

对所有的元素先去掉自带的内边距和外边距，应为里立体效果就是需要依靠内外边距

*{
            margin:0;
            padding:0;
            box-sizing:border-box;

        }
        body{
            width:100vw;
            height: 100vh;
            display: flex;
            background-color: #63b9e4;
            /* 设置主轴居中 */
            justify-content: center;

        }

3.完整代码