，叠加青色#0ff和红色#f00，错开一定距离，添加background-blend-mode:lightentobothpictures,addmix-blend-mode:darkentooneofthem:.mix{width:400px;高度：400px；背景:url($img),#0ff;背景混合模式：变亮；＆::之后{内容：'';位置：绝对；左边距：10px；宽度：400px；高度：400px；背景:url($img),#f00;混合模式：变亮；混合混合模式：变暗；}}得到如下效果：这里和上面的抖音LOGO有点不同，使用的混合模式不止一种，我简单说明一下。因为图片本身并不是红色和青色，所以需要通过background-image将这两种颜色叠加，通过background-blend-mode:lighten使其呈现出来。中间为了保持叠加部分原来的颜色，需要叠加一个mix-blend-mode:darken反处理。（不懂的同学可以打开调试，手动关掉几个混合模式，自己感受一下）有了上面的铺垫，我们接下来就可以动画这个效果了。重点是使用mix-blend-mode:lighten混合模式实现两段文字结构重叠部分为白色。利用元素位移完成错位运动动画，形成视觉冲击效果。看效果：本文有点长，代码就不上传了。完整的DEMO在这里：class抖音LOGOTextGlitchEffect当然，我们不一定要用混合模式让融合部分变白，我们可以直接使用这个配色效果，基于上面的另一个版本效果，不使用混合模式。关键点是使用伪元素生成文本的两个副本。视觉效果由置换、遮罩和混合模式完成。配色借鉴了抖音的LOGO。好处是对于文本的每一份拷贝，都有更大的移动距离和处理空间。GlitchArtstyle404效果稍微把文字文案替换成404，然后加了一些滤镜效果（hue-rotate(),blur()）嘿嘿，我发现了一个可能实际可用的场景：效果一：效果二：二404效果的demo如下：CodePen--CSS404失败效果CodePen--404失败效果其他配色效果当然不止这个红+蓝配色效果。还有一些其他的配色混合模式，比如黄色+粉色+蓝色搭配mix-blend-mode:multiply。然后，有时候，效果不想和背景混在一起，可以用isolation:isolate来隔离。好吧，以上效果可以归为一类。接下来，打开下一个类别剪辑路径。本章后半部分的主角主要是clip-path。clip-path是一个非常有趣的CSS属性。clip-pathCSS属性创建一个裁剪区域，其中仅显示元素的一部分。区域内的部分显示，区域外的部分隐藏。裁剪区域是通过引用嵌入的URL或外部SVG路径来定义的。也就是说，使用clip-path可以把一个容器切割成我们想要的样子。例如：div{margin:auto;填充：10px；行高：1.2；字体大小：60px；background:#ddd;}这是正常的：使用clip-path来裁剪到一个平行四边形：div{margin:auto;填充：10px；行高：1.2；字体大小：60px；background:#ddd;+clip-path:polygon(35%0,85%0,75%100%,25%100%);}结果如下：然后，我们有一个想法，我们可以复制几份将文本重叠，然后分别剪切这些副本以制作位移动画。使用clip-path实现文字打断动画我们还是使用元素的::before和::after伪元素做两份，然后使用clip-path进行裁剪，再使用transform进行控制。核心代码：TextCrack