console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
  <head>
    <title>css</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link rel="stylesheet" type="text/css" href="./test-css-effect.css">
    <link rel="stylesheet" type="text/css" href="./test2.css">
  </head>
  <body>
    <div class="box-interesting-wrap">
      <div class="box">
        <div class="d-flex flex-column align-items-center">
          <div class="text-wrap">
            <h1 data-t="words" class="h1">
              words
            </h1>
            <!--<img src="https://pic2.zhimg.com/v2-cee140ecc0943cd44cc4fd073962ef1d_b.png">-->
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

.box-interesting-wrap {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:flex;
	justify-content:center;
	align-items:center
}
.box-interesting-wrap .box {
	margin:0 auto;
	padding:4rem 1.25rem;
	background-color:#fff;
	width:546px;
	border-radius:.25rem
}
.box-interesting-wrap .box .text-wrap {
	position:relative;
	width:100%;
	height:7.1875rem;
	text-align:center;
	z-index:3
}
/* 应用该特效的元素设置 */
.box-interesting-wrap .box .text-wrap h1,
.box-interesting-wrap .box .text-wrap img {
	position:absolute;
	text-align:center;
	width:100%;
	font-size:6rem;
	font-weight:700;
	margin:0;
	animation:shake .6s ease-in-out infinite alternate;
	user-select:none
}
/* 让图片和上面的元素位置错开一点 */
.box-interesting-wrap .box .text-wrap img {
    width: 60px;
    top: 200px;
}
/* /让图片和上面的元素位置错开一点 */
.box-interesting-wrap .box .text-wrap h1:before,
.box-interesting-wrap .box .text-wrap img: before {
	content:attr(data-t);
	position:absolute;
	left:50%;
	transform:translate(-50%,.34em);
	height:.1em;
	line-height:.5em;
	width:100%;
	animation:scan .5s ease-in-out 487ms infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
	overflow:hidden;
	opacity:.7
}
.box-interesting-wrap .box .text-wrap h1:after,
.box-interesting-wrap .box .text-wrap img:after {
	content:attr(data-t);
	position:absolute;
	top:-4px;
	left:50%;
	transform:translate(-50%,.34em);
	height:.5em;
	line-height:.1em;
	width:100%;
	animation:scan 665ms ease-in-out 76ms infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
	overflow:hidden;
	opacity:.8
}
/* /应用该特效的元素设置 */
@media only screen and (max-width:480px) {
	.box-interesting-wrap .box .box {
	width:100%
}
}.box-interesting-wrap .box .clearfix:after,.box-interesting-wrap .box .clearfix:before {
	content:" ";
	display:table
}
.box-interesting-wrap .box .clearfix:after {
	clear:both
}
@keyframes scan {
	0%,20%,to {
	height:0;
	transform:translate(-50%,.44em)
}
10%,15% {
	height:1em;
	line-height:.2em;
	transform:translate(-55%,.28em)
}
}@keyframes attn {
	0%,to {
	opacity:1
}
30%,35% {
	opacity:.4
}
}@keyframes shake {
	0%,to {
	transform:translate(-1px)
}
10% {
	transform:translate(2px,1px)
}
30% {
	transform:translate(-3px,2px)
}
35% {
	transform:translate(2px,-3px);
	filter:blur(4px)
}
45% {
	transform:translate(2px,2px) skewY(-8deg) scaleX(.96);
	filter:blur(0)
}
50% {
	transform:translate(-3px,1px)
}
}