css3显示器故障形式的文本

2019-09-06184次阅读css3

原文字和它的两个伪元素是相互堆叠在一起的。每一帧都使用transform: translate属性来移动元素或者clip裁切实现。

html代码:

<div class="bruce flex-ct-x">
	<div class="fault-text" data-text="ERROR">ERROR</div>
</div>

css代码:

.bruce {
	background-color: #000;
}
.fault-text {
	position: relative;
	font-weight: bold;
	font-size: 100px;
	color: #fff;
	&::before,
	&::after {
		overflow: hidden;
		position: absolute;
		top: 0;
		background-color: #000;
		clip: rect(0, 900px, 0, 0);
		color: #fff;
		content: attr(data-text);
		animation: shake 3s linear infinite alternate-reverse;
	}
	&::before {
		left: -2px;
		text-shadow: 1px 0 $blue;
	}
	&::after {
		left: 2px;
		text-shadow: -1px 0 $red;
		animation-duration: 2s;
	}
}
@keyframes shake {
	$steps: 20;
	@for $i from 0 through $steps {
		#{percentage($i * (1 / $steps))} {
			clip: rect(random(100) + px, 9999px, random(100) + px, 0);
		}
	}
}

 

上一篇: 提示滚动进度的指示器例如阅读进度  下一篇: Element​.class​List还可以这样操作?  

css3显示器故障形式的文本相关文章