“文字故障”的效果实现

最新推荐文章于 2025-12-22 19:02:04 发布

原创最新推荐文章于 2025-12-22 19:02:04 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #css #javascript

教学来自b站大佬JIEJOE_轻敲代码

基本代码：

<template>
  <body>
    <div class ="container"onclick='faulttext.fault()'>
      <p class ="faulttext">CONTEXT</p>
    </div>
  </body>
</template>

const faulttext={
    player:{},
    text:[],
    init(){
        this.text = [...document.getElementsByClassName('faulttext')];
    
    }
    this.player=setInterval(()=>{
        this.texts.forEach(text =>{
        text.classList.add('faulttext_fault');
    });
    },30);
};

.container {
  left: 0;
  right: 0;
  top:50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.faulttext {
  position: absolute;
  font-family: Impact, sans-serif;
  font-size: 5rem;
  letter-spacing: 0.5rem;
  user-select: none;
  color:#FFFFFF;
  margin: 0;
  
}

要实现此效果，首先将其拆成三个部分

1.颜色分离

2.图形抖动

3.错位图块

1.颜色分离

核心代码是css中的mix-blend-mode，该属性可以使物体前景颜色与背景颜色混合，类似图层混合（想象将一张蓝色的薄纸和一张红色的薄纸重叠在一起变成紫色）。所以我们先设置两个不同颜色的CONTEXT

.faulttext_fault::after,
.faulttext_fault::before{ 
  content: "CONTEXT";
  position: absolute;
  left: 0;
  right: 0;
  mix-blend-mode: screen;
  z-index: -1;
}
.faulttext_fault::after{
  color: #ff0000;
  transform: translateX(2%);
}
.faulttext_fault::before{
  color: #0000ff;
  transform: translateX(-2%);
}

（#ff0000为红色，#0000FF为蓝色）

此时点击CONTEXT会出现蓝色和红色的重影

2.图形抖动

用translate属性来设置抖动范围区间（-50,50）

text.style.transform = `translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px)`;

3.错位图块

核心是clipPath属性，其作用是裁剪图形，clipPath:Polygon(x1y1,x2y2,x3y3,x4y4)即为多边形裁剪，各个坐标以顺时针方向连线

        let x = Math.random() * 100 ;
        let y = Math.random() * 100 ;
        let h = Math.random() * 50 + 50 ;
        let w = Math.random() * 50 + 10 ;
        text.style.clipPath = `polygon(${x}% ${y}%, ${x + w}% ${y}%, ${x + w}% ${y + h}%, ${x}% ${y + h}%)`;

给四个坐标设置随机不同的值，即可实现图案的随机裁剪，即实现图案的错位

最后，给文字故障定时3秒钟，3秒后自动清除

    clearInterval(this.player);
    setTimeout(() => {
      clearInterval(this.player);
      this.texts.forEach(text => {
        text.classList.remove('faulttext_fault');
        text.style.transform = 'translate(0, 0)';
        text.style.clipPath = 'polygon(0 0, 100% 0, 100% 100%, 0 100%)';
      });
    }, 3000);