輕鬆使用純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設計模式(附詳細思惟導圖和源碼)