文字故障css效果

时间:2019-07-04
本文章向大家介绍文字故障css效果,主要包括文字故障css效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
		<style>
			/* latin-ext */
			@font-face {
			  font-family: "Varela";
			  font-style: normal;
			  font-weight: 400;
			  src: local("Varela"), url(https://fonts.gstatic.com/s/varela/v9/DPEtYwqExx0AWHX5DR4ETvw.woff2) format("woff2");
			  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
			  font-family: "Varela";
			  font-style: normal;
			  font-weight: 400;
			  src: local("Varela"), url(https://fonts.gstatic.com/s/varela/v9/DPEtYwqExx0AWHX5Ax4E.woff2) format("woff2");
			  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			body {
			  background: black;
			  font-family: "Varela", sans-serif;
			}

			.glitch {
			  color: white;
			  font-size: 100px;
			  position: relative;
			  width: 400px;
			  margin: 0 auto;
			}

			@keyframes noise-anim {
			  0% {
				clip: rect(73px, 9999px, 15px, 0);
			  }
			  5% {
				clip: rect(3px, 9999px, 100px, 0);
			  }
			  10% {
				clip: rect(93px, 9999px, 80px, 0);
			  }
			  15% {
				clip: rect(99px, 9999px, 19px, 0);
			  }
			  20% {
				clip: rect(41px, 9999px, 34px, 0);
			  }
			  25% {
				clip: rect(82px, 9999px, 54px, 0);
			  }
			  30% {
				clip: rect(8px, 9999px, 62px, 0);
			  }
			  35% {
				clip: rect(19px, 9999px, 26px, 0);
			  }
			  40% {
				clip: rect(82px, 9999px, 50px, 0);
			  }
			  45% {
				clip: rect(97px, 9999px, 40px, 0);
			  }
			  50% {
				clip: rect(31px, 9999px, 47px, 0);
			  }
			  55% {
				clip: rect(34px, 9999px, 34px, 0);
			  }
			  60% {
				clip: rect(33px, 9999px, 74px, 0);
			  }
			  65% {
				clip: rect(27px, 9999px, 92px, 0);
			  }
			  70% {
				clip: rect(59px, 9999px, 100px, 0);
			  }
			  75% {
				clip: rect(8px, 9999px, 93px, 0);
			  }
			  80% {
				clip: rect(93px, 9999px, 73px, 0);
			  }
			  85% {
				clip: rect(100px, 9999px, 13px, 0);
			  }
			  90% {
				clip: rect(20px, 9999px, 24px, 0);
			  }
			  95% {
				clip: rect(51px, 9999px, 100px, 0);
			  }
			  100% {
				clip: rect(57px, 9999px, 7px, 0);
			  }
			}
			.glitch:after {
			  content: attr(data-text);
			  position: absolute;
			  left: 2px;
			  text-shadow: -1px 0 red;
			  top: 0;
			  color: white;
			  background: black;
			  overflow: hidden;
			  clip: rect(0, 900px, 0, 0);
			  animation: noise-anim 2s infinite linear alternate-reverse;
			}

			@keyframes noise-anim-2 {
			  0% {
				clip: rect(99px, 9999px, 98px, 0);
			  }
			  5% {
				clip: rect(87px, 9999px, 41px, 0);
			  }
			  10% {
				clip: rect(33px, 9999px, 40px, 0);
			  }
			  15% {
				clip: rect(33px, 9999px, 43px, 0);
			  }
			  20% {
				clip: rect(89px, 9999px, 22px, 0);
			  }
			  25% {
				clip: rect(12px, 9999px, 73px, 0);
			  }
			  30% {
				clip: rect(47px, 9999px, 18px, 0);
			  }
			  35% {
				clip: rect(62px, 9999px, 98px, 0);
			  }
			  40% {
				clip: rect(30px, 9999px, 94px, 0);
			  }
			  45% {
				clip: rect(69px, 9999px, 65px, 0);
			  }
			  50% {
				clip: rect(87px, 9999px, 47px, 0);
			  }
			  55% {
				clip: rect(12px, 9999px, 3px, 0);
			  }
			  60% {
				clip: rect(63px, 9999px, 14px, 0);
			  }
			  65% {
				clip: rect(88px, 9999px, 97px, 0);
			  }
			  70% {
				clip: rect(15px, 9999px, 23px, 0);
			  }
			  75% {
				clip: rect(88px, 9999px, 20px, 0);
			  }
			  80% {
				clip: rect(68px, 9999px, 54px, 0);
			  }
			  85% {
				clip: rect(58px, 9999px, 66px, 0);
			  }
			  90% {
				clip: rect(98px, 9999px, 97px, 0);
			  }
			  95% {
				clip: rect(86px, 9999px, 16px, 0);
			  }
			  100% {
				clip: rect(79px, 9999px, 77px, 0);
			  }
			}
			.glitch:before {
			  content: attr(data-text);
			  position: absolute;
			  left: -2px;
			  text-shadow: 1px 0 blue;
			  top: 0;
			  color: white;
			  background: black;
			  overflow: hidden;
			  clip: rect(0, 900px, 0, 0);
			  animation: noise-anim-2 3s infinite linear alternate-reverse;
			}
		</style>
	</head>
	<body>
		<div class="glitch" data-text="GLITCH">GLITCH</div>
	</body>
</html>

  

$flag 上一页 下一页