vsecoder-old-account/glitch.html

## glitch.html
<!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Всеволод html</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  body,
  html {
    width: 100%;
    height: 100%;
  }
  body {
    background-color: #000;
  }
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .box .glitch {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 100px;
    position: relative;
    padding: 30px;
  }
  .box .glitch:before, .box .glitch:after {
    content: "Всеволод html";
    color: #fff;
    position: absolute;
    top: 0;
    overflow: hidden;
    padding: 30px;
  }
  .box .glitch:before {
    left: 3px;
    text-shadow: -3px 0 red;
    animation: glitch-before 2s linear 0s infinite alternate;
  }
  .box .glitch:after {
    left: -3px;
    text-shadow: -3px 0 blue;
    animation: glitch-after 2s linear 0s infinite alternate;
  }
  @keyframes glitch-before {
    0% {
      clip: rect(137px, 780px, 103px, 30px);
    }
    5% {
      clip: rect(29px, 780px, 77px, 30px);
    }
    10% {
      clip: rect(148px, 780px, 150px, 30px);
    }
    15% {
      clip: rect(60px, 780px, 65px, 30px);
    }
    20% {
      clip: rect(99px, 780px, 54px, 30px);
    }
    25% {
      clip: rect(104px, 780px, 11px, 30px);
    }
    30% {
      clip: rect(45px, 780px, 82px, 30px);
    }
    35% {
      clip: rect(32px, 780px, 10px, 30px);
    }
    40% {
      clip: rect(1px, 780px, 11px, 30px);
    }
    45% {
      clip: rect(119px, 780px, 93px, 30px);
    }
    50% {
      clip: rect(19px, 780px, 20px, 30px);
    }
    55% {
      clip: rect(26px, 780px, 84px, 30px);
    }
    60% {
      clip: rect(63px, 780px, 44px, 30px);
    }
    65% {
      clip: rect(21px, 780px, 113px, 30px);
    }
    70% {
      clip: rect(45px, 780px, 132px, 30px);
    }
    75% {
      clip: rect(65px, 780px, 105px, 30px);
    }
    80% {
      clip: rect(65px, 780px, 124px, 30px);
    }
    85% {
      clip: rect(101px, 780px, 16px, 30px);
    }
    90% {
      clip: rect(20px, 780px, 116px, 90px);
    }
    95% {
      clip: rect(133px, 780px, 102px, 30px);
    }
    100% {
      clip: rect(9px, 780px, 147px, 30px);
    }
  }
  @keyframes glitch-after {
    0% {
      clip: rect(137px, 780px, 103px, 30px);
    }
    5% {
      clip: rect(29px, 780px, 77px, 30px);
    }
    10% {
      clip: rect(148px, 780px, 150px, 30px);
    }
    15% {
      clip: rect(60px, 780px, 65px, 30px);
    }
    20% {
      clip: rect(99px, 780px, 54px, 30px);
    }
    25% {
      clip: rect(104px, 780px, 11px, 30px);
    }
    30% {
      clip: rect(45px, 780px, 82px, 30px);
    }
    35% {
      clip: rect(32px, 780px, 10px, 30px);
    }
    40% {
      clip: rect(1px, 780px, 11px, 30px);
    }
    45% {
      clip: rect(119px, 780px, 93px, 30px);
    }
    50% {
      clip: rect(19px, 780px, 20px, 30px);
    }
    55% {
      clip: rect(26px, 780px, 84px, 30px);
    }
    60% {
      clip: rect(63px, 780px, 44px, 30px);
    }
    65% {
      clip: rect(21px, 780px, 113px, 30px);
    }
    70% {
      clip: rect(45px, 780px, 132px, 30px);
    }
    75% {
      clip: rect(65px, 780px, 105px, 30px);
    }
    80% {
      clip: rect(65px, 780px, 124px, 30px);
    }
    85% {
      clip: rect(101px, 780px, 16px, 30px);
    }
    90% {
      clip: rect(20px, 780px, 116px, 90px);
    }
    95% {
      clip: rect(133px, 780px, 102px, 30px);
    }
    100% {
      clip: rect(9px, 780px, 147px, 30px);
    }
  }
  </style>
<!-- закрываем служебную часть страницы -->
</head>
<body>
  <div class="box">
    <h1 class="glitch">
      Всеволод html
    </h1>
  </div>
</body>
<!-- конец всей страницы -->
</html>
	<!DOCTYPE html>
	<html>
	<!-- служебная часть -->
	<head>
	<!-- заголовок страницы -->
	<title>Всеволод html</title>
	<!-- настраиваем служебную информацию для браузеров -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	body,
	html {
	width: 100%;
	height: 100%;
	}
	body {
	background-color: #000;
	}
	.box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	}
	.box .glitch {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 100px;
	position: relative;
	padding: 30px;
	}
	.box .glitch:before, .box .glitch:after {
	content: "Всеволод html";
	color: #fff;
	position: absolute;
	top: 0;
	overflow: hidden;
	padding: 30px;
	}
	.box .glitch:before {
	left: 3px;
	text-shadow: -3px 0 red;
	animation: glitch-before 2s linear 0s infinite alternate;
	}
	.box .glitch:after {
	left: -3px;
	text-shadow: -3px 0 blue;
	animation: glitch-after 2s linear 0s infinite alternate;
	}
	@keyframes glitch-before {
	0% {
	clip: rect(137px, 780px, 103px, 30px);
	}
	5% {
	clip: rect(29px, 780px, 77px, 30px);
	}
	10% {
	clip: rect(148px, 780px, 150px, 30px);
	}
	15% {
	clip: rect(60px, 780px, 65px, 30px);
	}
	20% {
	clip: rect(99px, 780px, 54px, 30px);
	}
	25% {
	clip: rect(104px, 780px, 11px, 30px);
	}
	30% {
	clip: rect(45px, 780px, 82px, 30px);
	}
	35% {
	clip: rect(32px, 780px, 10px, 30px);
	}
	40% {
	clip: rect(1px, 780px, 11px, 30px);
	}
	45% {
	clip: rect(119px, 780px, 93px, 30px);
	}
	50% {
	clip: rect(19px, 780px, 20px, 30px);
	}
	55% {
	clip: rect(26px, 780px, 84px, 30px);
	}
	60% {
	clip: rect(63px, 780px, 44px, 30px);
	}
	65% {
	clip: rect(21px, 780px, 113px, 30px);
	}
	70% {
	clip: rect(45px, 780px, 132px, 30px);
	}
	75% {
	clip: rect(65px, 780px, 105px, 30px);
	}
	80% {
	clip: rect(65px, 780px, 124px, 30px);
	}
	85% {
	clip: rect(101px, 780px, 16px, 30px);
	}
	90% {
	clip: rect(20px, 780px, 116px, 90px);
	}
	95% {
	clip: rect(133px, 780px, 102px, 30px);
	}
	100% {
	clip: rect(9px, 780px, 147px, 30px);
	}
	}
	@keyframes glitch-after {
	0% {
	clip: rect(137px, 780px, 103px, 30px);
	}
	5% {
	clip: rect(29px, 780px, 77px, 30px);
	}
	10% {
	clip: rect(148px, 780px, 150px, 30px);
	}
	15% {
	clip: rect(60px, 780px, 65px, 30px);
	}
	20% {
	clip: rect(99px, 780px, 54px, 30px);
	}
	25% {
	clip: rect(104px, 780px, 11px, 30px);
	}
	30% {
	clip: rect(45px, 780px, 82px, 30px);
	}
	35% {
	clip: rect(32px, 780px, 10px, 30px);
	}
	40% {
	clip: rect(1px, 780px, 11px, 30px);
	}
	45% {
	clip: rect(119px, 780px, 93px, 30px);
	}
	50% {
	clip: rect(19px, 780px, 20px, 30px);
	}
	55% {
	clip: rect(26px, 780px, 84px, 30px);
	}
	60% {
	clip: rect(63px, 780px, 44px, 30px);
	}
	65% {
	clip: rect(21px, 780px, 113px, 30px);
	}
	70% {
	clip: rect(45px, 780px, 132px, 30px);
	}
	75% {
	clip: rect(65px, 780px, 105px, 30px);
	}
	80% {
	clip: rect(65px, 780px, 124px, 30px);
	}
	85% {
	clip: rect(101px, 780px, 16px, 30px);
	}
	90% {
	clip: rect(20px, 780px, 116px, 90px);
	}
	95% {
	clip: rect(133px, 780px, 102px, 30px);
	}
	100% {
	clip: rect(9px, 780px, 147px, 30px);
	}
	}
	</style>
	<!-- закрываем служебную часть страницы -->
	</head>
	<body>
	<div class="box">
	<h1 class="glitch">
	Всеволод html
	</h1>
	</div>
	</body>
	<!-- конец всей страницы -->
	</html>