css实现水滴结果图

结果图： 

 

1. <template>
2.   <div style="width: 100%;height:500px;padding:20px;">
3.     <div class="water"></div>
4.   </div>
5. </template>
6. <script>
7. export default {
8.   data() {
9.     return {};
10.   },
11.   watch: {},
12.   created() {},
13.   methods: {},
14. };
15. </script>
16. <style lang='less' scoped>
17. .water {
18.   width: 300px;
19.   height: 300px;
20.   box-shadow: 10px 20px 30px 0px rgba(0, 0, 0, 0.2) inset,
21.               10px 20px 30px rgba(0,0,0,0.3),
22.               15px 15px 30px rgba(0,0,0,0.05),
23.               -15px -15px 30px rgba(255,255,255,0.8) inset;
24.   border-radius: 59% 41% 71% 29% / 54% 43% 57% 46% ;
25.   margin: 0 auto;
26.   margin-top:300px;
27.   /**
28.   box-sizing 用于控制元素的盒模型，决定了元素的宽度和高度是如何计算的；
29.   默认值是content-box, 元素的宽度和高度只包含内容区域，
30.   border-box , 元素的宽度和高度包含内容区域，内边距，边框；
31.    */
32.   box-sizing: border-box;
33.   animation: action 3s linear infinite;
34. }
35. @keyframes action {
36.   0%{
37.     border-radius: 59% 41% 71% 29% / 54% 43% 57% 46% ;
38.   }
39.   25%{
40.     border-radius:43% 57% 55% 45% / 63% 37% 63% 37% ;
41.   }
42.   50%{
44.     border-radius:37% 63% 39% 61% / 69% 26% 74% 31% ;
45.   }
46.   75%{
47.     border-radius:53% 47% 44% 56% / 50% 58% 42% 50%  ;
48.   }
49.   100%{
50.     border-radius: 59% 41% 71% 29% / 54% 43% 57% 46% ;
51.   }
52. }
53. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。