CSS3 花屏文字

原理图

想要看原理图的话，仅需要加上如下样式

.scanline {
	background-color: red;
}
.blurtext:before {
	background-color: green;
}
.blurtext:after {
	background-color: blue;
}

可以看出

• 扫码线基本都在文字下方，然后瞬间弹跳两次，最终又回到文字下方
• 偏移的蓝色矩形也是从上向下弹跳
• 背后的绿色矩形只有在蓝色矩形回收的时候，才会偶尔短暂显示

偏移文字不加背景情况的透视图

该图是把 “偏移文字” 的图层背景的透明度置为 0.5，即50%透明度

• 可以看出底部遮罩层露了出来
• 红色阴影偶尔才显示，是因为偏移量比较小，又是右侧（在同层级的 文字下层）所以仅会显示一丢丢

.blurtext:after {
	background-color: rgba(255,255,255,0.5);
}

最终效果图

代码如下：

	
天下人做天下事