好孩子看不见

福利网站有一种常见的设计:好孩子看不见(没错,是那种福利网站)。默认文字颜色看不见,选中以后才能看见文字。

实现原理很简单:
1、给文字颜色设置透明

1
2
3
.good-boy-cant-see {
color: transparent;
}

2、选中以后设置颜色

1
2
3
.good-boy-cant-see > ::selection {
color:#555;
}

试一试:http://lab.fiftykg.com/good-boy-cant-see/