记录一款故障字 CSS特效代码

效果演示

实现两个条件

1. html

    <span class="guzhang">故障文字特效-LUYU</span>

2.css

@import 'https://fonts.googleapis.com/css?family=Lato';.guzhang{animation:glitch 3s steps(100) infinite;color:#151515;font-size:1.2em;text-align:center;text-transform:uppercase}@keyframes glitch{0%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}1%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}2%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}3%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}4%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}5%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}6%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}7%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}8%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}9%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}10%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}11%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0.5px)}12%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0.5px)}13%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0.5px)}14%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0)}15%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0)}16%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}17%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}18%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}19%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}20%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}21%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}22%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}23%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}24%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}25%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}26%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0.5px)}27%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0.5px)}28%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}29%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}30%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}31%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}32%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}33%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}34%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}35%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0.5px)}36%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0.5px)}37%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0.5px)}38%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}39%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}40%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}41%{text-shadow:45px 0 0 #0c33f5,-45px 0 0 lime;filter:blur(0)}42%{text-shadow:0 0 0 #0c33f5,0 0 0 lime;filter:blur(0)}43%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0)}44%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0)}45%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0)}46%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0.5px)}47%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0.5px)}48%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}49%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}50%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}51%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}52%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}53%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}54%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}55%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0.5px)}56%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0.5px)}57%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0.5px)}58%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}59%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}60%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}61%{text-shadow:30px 0 0 red,-30px 0 0 lime;filter:blur(0)}62%{text-shadow:0 0 0 red,0 0 0 lime;filter:blur(0)}63%{text-shadow:1px 0 0 red,-1px 0 0 #0c33f5;filter:blur(0)}64%{text-shadow:1px 0 0 red,-1px 0 0 #0c33f5;filter:blur(0)}65%{text-shadow:1px 0 0 red,-1px 0 0 #0c33f5;filter:blur(0)}66%{text-shadow:1px 0 0 red,-1px 0 0 #0c33f5;filter:blur(0.5px)}67%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0.5px)}68%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}69%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}70%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}71%{text-shadow:50px 0 0 red,-50px 0 0 #0c33f5;filter:blur(0)}72%{text-shadow:0 0 0 red,0 0 0 #0c33f5;filter:blur(0)}73%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}74%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}75%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}76%{text-shadow:3px 0 0 red,-3px 0 0 #0c33f5;filter:blur(0)}77%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}78%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}79%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}80%{text-shadow:-3px 0 0 red,3px 0 0 #0c33f5;filter:blur(0)}81%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0)}82%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0)}83%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0.5px)}84%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0.5px)}85%{text-shadow:1px 0 0 red,-1px 0 0 lime;filter:blur(0.5px)}86%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0.5px)}87%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0.5px)}88%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}89%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}90%{text-shadow:-3px 0 0 red,3px 0 0 lime;filter:blur(0)}91%{text-shadow:60px 0 0 lime,-60px 0 0 #0c33f5;filter:blur(0)}92%{text-shadow:0 0 0 lime,0 0 0 #0c33f5;filter:blur(0)}92%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}93%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}94%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}95%{text-shadow:0.8px 0 0 #0c33f5,-0.8px 0 0 lime;filter:blur(0)}96%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}97%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}98%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}99%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}100%{text-shadow:-3px 0 0 #0c33f5,3px 0 0 lime;filter:blur(0)}}

分享到：