css实现文字闪烁动画效果代码-html代码-BFW代码库

css实现文字闪烁动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字闪烁动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap");
body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #222;
}
span {
  background-image: linear-gradient(#f0a, #f05);
  background-clip: text;
  color: transparent;
  font-size: 124px;
  font-family: "Pixelify Sans";
  position: relative;
}
span:after {
  content: 'BFW.WIKI';
  position: absolute;
  clip: rect(0, 900px, 0, 0);
  background-color: #222;
  color: transparent;
  animation: glitch 3s infinite alternate-reverse;
  animation-delay: 1s;
  z-index: 22;
}
@-moz-keyframes glitch {
  0% {
    clip: rect(6px, 9999px, 35px, 0);
    -webkit-text-stroke: 2px #f00;
    left: 0px;
    top: -3px;
  }
  5% {
    clip: rect(91px, 9999px, 70px, 0);
    -webkit-text-stroke: 2px #0f0;
    left: 0px;
    top: 3px;
  }
  10% {
    clip: rect(16px, 9999px, 109px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 2px;
    top: 3px;
  }
  15% {
    clip: rect(12px, 9999px, 97px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 1px;
    top: -1px;
  }
  20% {
    clip: rect(52px, 9999px, 58px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 0px;
    top: -3px;
  }
  25% {
    clip: rect(77px, 9999px, 73px, 0);
    -webkit-text-stroke: 2px #0f0;
    left: -1px;
    top: 1px;
  }
  30% {
    clip: rect(19px, 9999px, 11px, 0);
    -webkit-text-stroke: 2px #f00;
    left: -3px;
    top: 0px;
  }
  35% {
    clip: rect(30px, 9999px, 81px, 0);
    -webkit-text-stroke: 2px #0f0;
    left: -2px;
    top: 3px;
  }
  40% {
    clip: rect(35px, 9999px, 115px, 0);
    -webkit-text-stroke: 2px #0f0;
    left: 2px;
    top: -1px;
  }
  45% {
    clip: rect(46px, 9999px, 119px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 2px;
    top: -2px;
  }
  50% {
    clip: rect(39px, 9999px, 12px, 0);
    -webkit-text-stroke: 2px #00f;
    left: -3px;
    top: 2px;
  }
  55% {
    clip: rect(43px, 9999px, 121px, 0);
    -webkit-text-stroke: 2px #0f0;
    left: -2px;
    top: 1px;
  }
  60% {
    clip: rect(72px, 9999px, 9px, 0);
    -webkit-text-stroke: 2px #00f;
    left: -3px;
    top: 2px;
  }
  65% {
    clip: rect(84px, 9999px, 122px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 3px;
    top: -2px;
  }
  70% {
    clip: rect(27px, 9999px, 88px, 0);
    -webkit-text-stroke: 2px #00f;
    left: -1px;
    top: 0px;
  }
  75% {
    clip: rect(26px, 9999px, 25px, 0);
    -webkit-text-stroke: 2px #f00;
    left: -3px;
    top: 2px;
  }
  80% {
    clip: rect(12px, 9999px, 78px, 0);
    -webkit-text-stroke: 2px #f00;
    left: 0px;
    top: 1px;
  }
  85% {
    clip: rect(35px, 9999px, 101px, 0);
    -webkit-text-stroke: 2px #f00;
    left: 1px;
    top: 0px;
  }
  90% {
    clip: rect(35px, 9999px, 98px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 0px;
    top: 0px;
  }
  95% {
    clip: rect(45px, 9999px, 38px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 3px;
    top: 0px;
  }
  100% {
    clip: rect(16px, 9999px, 79px, 0);
    -webkit-text-stroke: 2px #f00;
    left: -1px;
    top: -2px;
  }
}
@-webkit-keyframes glitch {
  0% {
    clip: rect(6px, 9999px, 35px, 0);
    -webkit-text-stroke: 2px #f00;
    left: 0px;
    top: -3px;
  }
  5% {
    clip: rect(91px, 9999px, 70px, 0);
    -webkit-text-stroke: 2px #0f0;
    left: 0px;
    top: 3px;
  }
  10% {
    clip: rect(16px, 9999px, 109px, 0);
    -webkit-text-stroke: 2px #00f;
    left: 2px;
    top: .........完整代码请登录后点击上方下载按钮下载查看