想闲暇的时候学点CSS动画的实现方法，
希望能持续更新 见证自己的成长 ，实现的效果也能越来越复杂好看！

波纹效果

充电动画

核心原理 filter的两个属性 blur（高斯模糊）px、contrast（对比度）%、hue-rotate(色相旋转) deg
有个疑问 就是w3c里面查的contrast的单位应该是 % 这个例子里面如果给它加了单位就实现不了了 就直接改变整体的对比度
blur(px): 默认为0，数值越大越模糊
contrast(%): 0%全黑，100%图像无变化。默认为1，超过100%图像会比原来亮
hue-rotate(deg)：0deg图像无变化。默认是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
Tips:
背景一般选择黑色或者白色，不然会受到contrast和hue-rotate的影响
在实现渐变效果的时候 filter: contrast(20) hue-rotate(0deg); 顺序不能变

成品效果：