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

徐小夕 等级 371 0 0

前言

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

正文

接下来笔者将带大家使用纯Css3来实现"故障动画", 并将这一特效封装成React/vue组件, 供大家学习和使用. 先来看看实现的效果: 轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版) 当然在下面的文章中笔者还会介绍其他风格的"故障动画".

实现原理

该效果的实现依赖于Css3的新特性mix-blend-modebackground-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; (复原)

轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版) 有点类似于PS里面的图层叠加模式.另一个css属性background-blend-modemix-blend-mode类似, 主要针对背景的混合模式, 这里我们主要采用mix-blend-mode来实现我们的故障效果.

2. 动画结构分析

轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版) 由上图我们可以分析出, "故障动画"包含4个元素: 背景, 前置文字, 后置文字, 故障线. 具体分解如下: 轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版) 通过以上分析我们大致可以写出基本的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为故障线的动画. 最后, 我们只需要借助css3animation让动画循环播放即可.

封装成react/vue组件

为了实现故障动画更大的自由度以及降低工程师的使用成本, 笔者将其封装成了react组件, vue组件的封装思路类似, 感兴趣的朋友可以自己试试. 这里我们来拆解故障动画组件设计的模型: 轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版) 组件的设计思想往往是设计的复杂性和使用的便捷性的博弈, 为了让使用者有更大的自由度, 往往会通过增加组件内部复杂度来弥补. 我们先来看看实现后的效果: 轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版)

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

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

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

轻松使用纯css3打造有点意思的故障艺术(附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游戏, webpacknodegulpcss3javascriptnodeJScanvas数据可视化等前端知识和实战,欢迎在公号《趣谈前端》加入我们的技术群一起学习讨论,共同探索前端的边界。 轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版)

更多推荐

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
昨天写了这些骚代码,今天上班差点被同事揍了
昨天写了这些骚代码,今天上班差点被同事揍了 前端开发 微信号 qianduan1024 功能介绍 专注于Web前端技术文章分享,包含JavaScript、HTML5、CSS3等前端基础知识,以及Vue.js,React,Augular等前端框架 收录于话题 来自:掘金,作者:布拉德特皮 链接:h
《前端实战总结》之使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。 你将学到 CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体 开始 1.CSS
基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)
前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor
《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, antdesignvue, iView等成熟的UI框架, react生态的antdesign, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和
轻松使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版)
前言 很早之前就看到国外很多酷炫的网站在实践"故障艺术", 或者错位动画", 感觉非常有意思, 现在APP端的抖音启动界面有着这种设计的影子, 作为一名用于探索未知的前端工程师, 有必要好好实践一下这一设计. 正文 接下来笔者将带大家使用纯Css3来实现"故障动画", 并将这一特效封装成React/vue组件, 供大家学习和使用. 先来看看实现的效果:
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特新实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
【Flutter实战】状态管理
3.2 状态管理响应式的编程框架中都会有一个永恒的主题——“状态(State)管理”,无论是在React/Vue(两者都是支持响应式编程的Web开发框架)还是Flutter中,他们讨论的问题和解决的思想都是一致的。所以,如果你对React/Vue的状态管理有了解,可以跳过本节。言归正传,我们想一个问题,StatefulWidget的状态应该被谁管理?
新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,可以在留言区里给我留言。为什么要引入 Reac