水波纹动画

水波纹动画

最近在网上看到了超级nice的动画效果，就很想学习，于是学习了这位博主写的水波纹的动画效果link，最近也在尝试着写博客，记录一下自己的学习心得，嗯嗯。

效果展示

核心原理

运用伪类，生成有角度的不停旋转的盒子，形成像是波浪的视差

核心技术 – animation

我们只需要为每个动画定义 @keyframes CSS规则，然后 animation 调用这些@keyframes产生动画效果。在每个 @keyframes CSS规则里面，我们需要定义动画发生的阶段时间和变化样式。例如，0% 表示动画的开始阶段，100% 表示动画的结束时刻。animation属性里引用 keyframes 有一种简写方式，展开来一共有8个子属性，通过它们，就可以控制各种的动画过程。

• animation-name: 指定一个 @keyframes 的名称，动画将要使用这个@keyframes定义。
• animation-duration: 整个动画需要的时长。
• animation-timing-function: 动画进行中的时速控制，比如 ease 或 linear.
• animation-delay: 动画延迟时间。
• animation-direction: 动画重复执行时运动的方向。
• animation-iteration-count: 动画循环执行的次数。
• animation-fill-mode: 设置动画执行完成后/开始执行前的状态，比如，你可以让动画执行完成后停留在最后一幕，或恢复到初始状态。
• animation-play-state: 暂停/启动动画。

实现步骤

①首先呢，生成一个div 圆，设置相对定位，居中

②在圆里面放一个div，宽高设置100%适应父元素，并且设置绝对定位，设置一下背景颜色，即（水的颜色）

③设置运用伪类 before, after, 设置绝对定位，把圆心向右移50%，把宽高扩大为原来的1.5倍，设置的弧度，使用animation产生动画效果，起始角度为0，结束角度为360°

 .water::before{
		    content: '';
		    position: absolute;
		    left: 50%;
		    width: 150%;
		    height: 150%;   
		    border-radius: 42%; 
		    background-color:  rgba(204, 255, 255,0.2); 
		    animation: li 7s linear infinite;
		}
		@keyframes li{
		    0%{
		        transform: translate(-50%,-60%) rotate(0deg);
		       
		    }
		    100%{
		        transform: translate(-50%,-60%) rotate(360deg); 
		      
		    }
		} 

④这样呢，就生成了一条波浪，按照上面的方法再生成一条波浪就形成了像是水波纹的视差

总结

波浪的形成其实就是两个盒模型的圆心位置不同，设置动画的时长不同，背景颜色的透明度不同，弧度有稍微的不同，形成的视觉上的波浪效果而已，多出来的部分直接overflow: hidden;即可。