轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版)

前言

很早之前就看到国外很多酷炫的网站在实践"故障艺术", 或者错位动画", 感觉非常有意思, 现在APP端的抖音启动界面有着这种设计的影子, 作为一名用于探索未知的前端工程师, 有必要好好实践一下这一设计.

正文

接下来笔者将带大家使用纯Css3来实现"故障动画", 并将这一特效封装成React/vue组件, 供大家学习和使用. 先来看看实现的效果:

当然在下面的文章中笔者还会介绍其他风格的"故障动画".

实现原理

该效果的实现依赖于Css3的新特性mix-blend-mode和background-blend-mode.接下来笔者简单介绍一下:

1. mix-blend-mode

该属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合. 具体的属性值介绍如下:

• mix-blend-mode: normal;(正常)
• mix-blend-mode: multiply(正片叠底)
• mix-blend-mode: screen;(滤色)
• mix-blend-mode: overlay;(叠加)
• mix-blend-mode: darken; (变暗)
• mix-blend-mode: lighten; (变亮)
• mix-blend-mode: color-dodge; (颜色减淡)
• mix-blend-mode: color-burn; (颜色加深)
• mix-blend-mode: hard-light; (强光)
• mix-blend-mode: soft-light;(柔光)
• mix-blend-mode: difference; (差值)
• mix-blend-mode: exclusion; (排除)
• mix-blend-mode: hue;(色相)
• mix-blend-mode: saturation; (饱和度)
• mix-blend-mode: color; (颜色)
• mix-blend-mode: luminosity; (亮度)
• mix-blend-mode: initial;(初始)
• mix-blend-mode: inherit; (继承)
• mix-blend-mode: unset; (复原)

有点类似于PS里面的图层叠加模式.另一个css属性background-blend-mode和mix-blend-mode类似, 主要针对背景的混合模式, 这里我们主要采用mix-blend-mode来实现我们的故障效果.

2. 动画结构分析

由上图我们可以分析出, "故障动画"包含4个元素: 背景, 前置文字, 后置文字, 故障线. 具体分解如下:

通过以上分析我们大致可以写出基本的dom结构来了, 有经验的朋友可能会想到使用伪元素来实现前置/后置文字/故障线, 虽然这种方式可以节省很多dom结构, 但是缺点就是封装的灵活度会降低, 所以笔者采用如下结构:

<div className="blink-item">
  <div className="text text-front">趣谈前端</div>
  <div className="text text-back">趣谈前端</div>
</div>

这里故障线我们采用伪元素来实现. 所以在文章开头的动画实现就变得很简单了,我们只需要设置一个画布背景,然后用内容混合让文字叠加, 最后设计文字和故障线的动画即可. 接下来我们看看具体的实现步骤.

实现方案

我们先来实现文字的混合效果, 故障线和画布背景, css代码如下:

.blink {
  // ...
  background-color: #000;
  .blink-item {
    &::after {
      content: '';
      position: absolute;
      z-index: 3;
      left: 0;
      top: 30px;
      width: 100%;
      height: 4px;
      background-color: #000;
    }
    .text-front {
      color: #74fcfd;
    }
    .text-back {
      position: absolute;
      transform: translate(-5px, -100%);
      color: #ea3448;
      mix-blend-mode: lighten;
    }
  }
}

由以上代码可知我们在后置文字的css样式中采用了mix-blend-mode并设置成lighten, 当然我们也可以设置成其他模式的值. 我们接下来就来实现故障的文字动画和故障线动画, 这块也很简单, 我们采用css3的@keyframe动画即可, 代码如下:

@keyframes shakeFront {
  0% {
    transform: translate(1px, 1px);
  }
  20% {
    transform: translate(-1px, 0);
  }
  60% {
    transform: translate(-1px, 0);
  }
  100% {
    transform: translate(1px, -1px);
  }
}
@keyframes shake {
  0% {
    transform: translate(-5px, -100%);
  }
  20% {
    transform: translate(-3px, -100%);
  }
  60% {
    transform: translate(1px, calc(-100% - 1px));
  }
  100% {
    transform: translate(2px, calc(-100% + 1px));
  }
}
@keyframes lineShake {
  0% {
    top: 10%;
  }
  20% {
    top: 60%;
  }
  40% {
    top: 35%;
  }
  60% {
    top: 2%;
  }
  80% {
    top: 80%;
  }
  100% {
    top: 99%;
  }
}

shakeFront和shake分别为后置文字和前置文字的动画, lineShake为故障线的动画. 最后, 我们只需要借助css3的animation让动画循环播放即可.

封装成react/vue组件

为了实现故障动画更大的自由度以及降低工程师的使用成本, 笔者将其封装成了react组件, vue组件的封装思路类似, 感兴趣的朋友可以自己试试. 这里我们来拆解故障动画组件设计的模型:

组件的设计思想往往是设计的复杂性和使用的便捷性的博弈, 为了让使用者有更大的自由度, 往往会通过增加组件内部复杂度来弥补. 我们先来看看实现后的效果:

为了实现以上这种自定义配置, 我们需要进一步对已有的代码进行封装, 比如故障线我们使用伪元素来实现的, 那么如何保证切换背景色之后能保证伪元素的背景色也响应的变化呢? 这里笔者采用的是背景继承, 即:

.blink {
  .blink-item {
    background-color: inherit;
    &::after {
      // ...
      background-color: inherit;
      animation: lineShake .5s infinite;
    }

这样我们只需要在.blink容器中动态传入背景颜色, 即可实现我们想要的效果. React组件代码如下:

import React from 'react'
import './index.less'
export default function Blink(props) {
  const { 
    text = '趣谈前端',
    fontSize = '48px',
    themeColor = '#000',
    textColor = ['#74fcfd', '#ea3448']
  } = props
  return (
    <div className='blink' style={{backgroundColor: themeColor}}>
      <div className="blink-item" data-text={text} style={{fontSize: fontSize}}>
        <div className="text text-front" style={{color: textColor[0]}}>{text}</div>
        <div className="text text-back" style={{color: textColor[1]}}>{text}</div>
      </div>
    </div> 
  )
}

怎么样,是不是很简单呢? 笔者已将组件代码上传到github, 大家可以安装使用或者在其基础上进一步完善, 比如基于背景图片的故障动画等等, 以上css3特性在现代浏览器中支持相对稳定, 在做H5开发中可以一试.