轻松使用纯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开发中能够一试.

最后

若是想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在公号《趣谈前端》加入咱们的技术群一块儿学习讨论，共同探索前端的边界。

更多推荐

• 快速在你的vue/react应用中实现ssr(服务端渲染)
• 程序员必备的几种常见排序算法和搜索算法总结
• 前端进阶之从零到一实现单向 & 双向链表
• 微前端架构初探以及个人前端技术盘点
• 基于nodeJS从0到1实现一个CMS全栈项目（上）
• 基于nodeJS从0到1实现一个CMS全栈项目（中）（含源码）
• CMS全栈项目之Vue和React篇（下）（含源码）
• 从零到一教你基于vue开发一个组件库
• 从0到1教你搭建前端团队的组件系统（高级进阶必备）
• 15分钟带你了解前端工程师必知的javascript设计模式(附详细思惟导图和源码)