嘘~一起做个有趣的React剪纸组件

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

介绍

我们本期要实现一个特别有意思的效果，一种文字剪纸效果，我们小学时经常会做这样的贺卡到了一些节日送给别的同学，还是挺温馨的。

我们将会用到scss写个react组件来实现。具体会分为：搭建项目，页面结构，剪纸样式三个部分来说明，我们要出发咯~

正文

1.搭建项目

yarn create-react-app app

我们本次就用官方搭建好的脚手架，一劳永逸。

yarn add node-sass -D

因为我们要使用scss所以要安装插件解析，后面多数情况都会使用scss做讲解。

2.页面结构

/*CutText.jsx*/
import React from "react";
import "./style.scss"

const CutText = function (props) {
  return (
    <div className="cut-text">
      {props.children.split("").map((char,index) => {
        return <span text={char} className="cut-char" key={index}>{char}</span>;
      })}
    </div>
  );
};

export default CutText;

形式期望是这样的，我们会在里面直接传字符串，我们将字符串解开变成单个字用span标签包裹起来。

/*App.jsx*/
import CutText from "./components/cuttext/CutText";

function App() {
  return (
    <div>
      <CutText>Mask</CutText>
      <CutText>Like</CutText>
      <CutText>Code</CutText>
    </div>
  );
}

export default App;

将App内原来的东西清空掉，直接换上我们想要写内容的组件，非常简单。

3.剪纸样式

.cut-text {
  font-size: 8em;
  position: relative;
  text-transform: full-width;
  display: flex;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  .cut-char {
    position: relative;
    color: rgba(0, 0, 0,.9);
    -webkit-text-stroke: 0.01em rgba(0, 0, 0, 0.3);
  }
}

我们将字体大小用8em，然后居中展示，span做成黑色充当镂空，后面真实的显示的字由伪类来完成。

现在的效果是这样的：

接下来我们将给他添加剪纸效果和投影。

.cut-char {
    // ...
    &::after,&::before {
        content: attr(text);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        user-select: none;
    }
}

在伪类里面我们可以通attr来拿到传过来的属性。我们要做一个绝对定位，使其完全与黑底重合。

 &::after {
     color: #f0635e;
     transform: rotateY(-30deg) skew(0, -10deg);
     transform-origin: left;
     transition: transform .3s;
}

我们在after要做的是重新赋予一个颜色，并将其通过transform做一个旋转和变形，这个需要按照自己的意愿去拿捏。

此时效果就出来了，可是为了更加逼真，我们再用before增加一层投影效果。

&::before {
    filter: blur(8px);
    background-image: linear-gradient(
        90deg,
        rgba(0,0,0, 0.4) 36%,
        transparent
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: skew(0, 20deg) translateY(0.07em) translateX(0.03em);
}

同样，做一个变形，然后偏移一点，模糊一下感觉就差不多了~

我们顺道再给个鼠标移入按下的效果，就齐活了~

&:hover{
    &::after{
        transform: rotateY(-5deg) skew(0, -1deg);
    }
}

鼠标移入就是削减他的旋转角度和变形就可，至于值是多少还是看自己的意愿拿捏。

讲到这里，我们的这个react剪纸组件就完成了，是不是超级容易。在线演示

思考

我们既然做成组件那么还可以改变大小和颜色，不仅可以完全通过js完成，我们还可以通过css3的改变属性变量来完成。例如：

:root{
    --size:1em;
    --color:"#000";
}

还有我们是否考虑还可以将图片也裁剪出来呢，想到了就来尝试一下吧~