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

徐小夕
• 阅读 1020

前言

很早之前就看到国外很多酷炫的网站在实践"故障艺术", 或者错位动画", 感觉非常有意思, 现在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加强组件版)

更多推荐

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue