炫酷的CSS样式—赛博朋克故障风

意会2023-09-19 18:03

给字体加炫酷的效果，直接展示：

先贴代码

less 复制代码

<template>
  <div style="height: 200px;width: 800px;background-color: rgb(78, 33, 33);">
    <link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
  <div class="glitch" data-text="Hello,World">Hello,World</div> 
  </div>

</template>
<style scoped lang="scss">
.glitch{
  color:rgb(168, 37, 37);
  font-size:80px;
  position:relative;
  width:400px;
  margin:0 auto;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i * calc(1 / $steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i * calc(1 / $steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:rgb(168, 37, 37);
  background:rgb(78, 33, 33);
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:rgb(168, 37, 37);
  background:rgb(78, 33, 33);
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}
</style>

主要是用的CSS的@keyframes规则和伪元素(:after和:before)来实现了闪烁效果。

首先.glitch类定义了字体颜色、字体大小、位置等基本样式，以及元素的宽度和居中对齐。然后通过两个不同的@keyframes规则来定义了两个动画效果，分别命名为noise-anim和noise-anim-2。这两个动画采用Sass的循环语法，生成了多个关键帧（steps），在每个关键帧中通过clip属性设置元素的裁剪范围，实现随机的位移效果。再分别使用:after和:before伪元素来创建两个相同的文本层叠在原始文本之上，分别应用了不同的动画和阴影效果。同时设置颜色和背景色与原始文本保持一致。最后，将两个动画应用到伪元素上，并设置动画参数，使其无限循环播放、线性变化，并在交替方向上反转动画。