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

徐小夕 等级 648 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加强组件版)

更多推荐

收藏
评论区

相关推荐

css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
《前端实战总结》之使用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组件, 供大家学习和使用. 先来看看实现的效果:
Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
CSS3动画(转自大神制作,很绚丽,纯CSS之作)
绚丽的3D动画(纯CSS实现,代码有点长啊,在这里不知道怎么折叠起来,讲究看看吧) 效果图:[https://bupt-hjm.github.io/css3-3d/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fbupt-hjm.github.io%2Fcss3-3d%2F)(转)
H5实现APP和原生方式有多大差距,多少坑?JS才是王道!
纯H5的APP,虽然开发起来要比纯原生开发畅快的多,但最终效果和性能还是和原生比起来还是有很多问题,主要聚集在以下几个方面: 1、动画 动画有很多种,比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等,在H5之下的众多实现方法都没有办法达到纯原生的性能。一般有这几种不同的选择:css3动画,javascript动画,原生动画。 cs
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。 那么这两个框架有什么不同呢? **React 和 Vue 相同之处,它们都有:** * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
React实战之React+Redux实现一个天气预报小项目
![](https://oscimg.oschina.net/oscnet/355a9b3e0af9e3410d9cf918fdfe69b2379.jpg)**引言** ------------------------------------------------------------------------------------ 经过一段时间的Re
React的Sass配置
React提供的脚手架[creact-react-app](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ffacebook.github.io%2Fcreate-react-app%2Fdocs%2Fadding-a-sass-stylesheet)创建的工程文件不像vue那种暴露出web
React面试必问Fiber和Hooks,一次搞定
国内的前端领域,Vue 和 React 是最火的两个框架,要说岗位数量,Vue可能会更多一点。 但如果把公司范围缩小到大厂,或者把范围扩展到全球,那React无疑独占鳌头。 ![](https://oscimg.oschina.net/oscnet/ba57134c-6a7d-47d8-a317-7ad3976a1a77.jpg "2019年
storybook配置之基本配置和webpack配置
#默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其与vue cli的webpack配置非常相似 开始学习Storybook配置 学习内容(Table of Contents) - Babel ES2016+