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

给字体加炫酷的效果,直接展示:

先贴代码

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-animnoise-anim-2。这两个动画采用Sass的循环语法,生成了多个关键帧(steps),在每个关键帧中通过clip属性设置元素的裁剪范围,实现随机的位移效果。再分别使用:after:before伪元素来创建两个相同的文本层叠在原始文本之上,分别应用了不同的动画和阴影效果。同时设置颜色和背景色与原始文本保持一致。最后,将两个动画应用到伪元素上,并设置动画参数,使其无限循环播放、线性变化,并在交替方向上反转动画。

相关推荐
佬乔1 分钟前
JWT-验证
java·服务器·前端
网络大镖客8 分钟前
JavaScript高级进阶(五)
开发语言·前端·javascript
人工智能的苟富贵9 分钟前
使用 TypeScript 开发并发布一个 npm 包(完整指南)
javascript·typescript·npm
星空寻流年32 分钟前
css3伸缩盒模型第一章(主轴以及伸缩盒模型)
前端·css·css3
酷爱码1 小时前
好看的个人主页HTML源码分享
前端·html
三思而后行,慎承诺2 小时前
react的fiber 用法
前端·javascript·react.js
Deepsleep.2 小时前
前端性能优化面试回答技巧
前端·面试·性能优化
阿伟来咯~3 小时前
vue3+Nest.js项目 部署阿里云
开发语言·javascript·ecmascript
不想上班只想要钱3 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
Li_Ning214 小时前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js