css 通过混合模式文字智能适应配色

用css制作如图样式
文本在黑色底色上表现为白色，在白色底色上表现为黑色，可以在 CSS 中，利用混合模式 mix-blend-mode: difference，很简单的实现。
normal：正常、multiply：正片叠底、screen：滤色、overlay：叠加darken：变暗、lighten：变亮、color-dodge：颜色减淡、color-burn：颜色加深、hard-light：强光、soft-light：柔光、difference：差值、exclusion：排除、hue：色相、saturation：饱和度、color：颜色、luminosity：亮度、initial：初始、inherit：继承、unset：复原

其中，利用的是差值模式 mix-blend-mode: difference
就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。很适合于表现黑白色。
其中还利用到animation属性实现动画效果。

animation的语法：

animation: name （绑定到选择器的 keyframe 名称）
duration （完成动画所花费的时间，以秒或毫秒计）
timing-function （动画的速度曲线）

delay （动画开始之前的延迟）
iteration-count （动画应该播放的次数）