开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情

前言：

最近看见了些水波纹加载画面的css效果，感觉还是很有意境，所以我也分享一下

思想：

水波纹动画无非就是一层字体里面一层水在动画，然后多余的进行隐藏，所以要想有水波纹效果就需要两层一层是水波纹来做动画另一层为字体（login），所以我们需要创建两层h2标签

<section>
	<div class="content">
	 <h2>Login</h2>
	 <h2>Login</h2>
	 </div>
</section>

在这里我们让整个页面的边距都清零并且设置背景为黑色

* {
		       margin: 0;
		       padding: 0;
		       box-sizing: border-box;
		     }
		     body {
		       display: flex;
		       background: #000;
		       min-height: 100vh;
		       -italignems: center;
		       justify-content: center;
		     }

在此处让通过子相父绝定位，让我们的h2垂直水平居中，并且适应屏幕大小

 .content {
		       position: relative;
		     }
 .content h2 {
		       color: #fff;
		       font-size: 8em;
		       position: absolute;
		       transform: translate(-50%, -50%);
		     }

接下来就是外层字体宽度颜色的设置-webkit-text-stroke CSS属性为文本字符指定了宽和颜色. 它是-webkit-text-stroke-width 和[-webkit-text-stroke-color`属性的缩写。

.content h2:nth-child(1) {
		       color: transparent;
		       -webkit-text-stroke: 2px #03a9f4;
		     }

通过动画@keyframes来设置水波纹的变化，让它在4秒内完成，尽量不要低于2秒，不然看着很假，用户等待的话也是很烦，因为水波纹常理来说不可能是匀速的但是又因为是加载动画所以所以我们设置ease-in-out使它相对于匀速，但是开始时快，结束时候间慢，然后设置infinite属性让这个动画一直循环下去

		     .content h2:nth-child(2) {
		       color: #03a9f4;
		       animation: animate 4s ease-in-out infinite;
		     }

动画这边我们使用clip-path CSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
polygon() ）。定义一个多边形（使用一个 SVG 填充规则和一组顶点）。这样就可以制造出水波纹效果

 @keyframes animate {
		       0%,
		       100% {
		         clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
		       }
		
		       50% {
		         clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
		       }
		     }

水波纹加载动画

前言：

思想：