CSS小技巧 - CSS实现光标

发表于 分类于 阅读次数：

原理使用css的伪类’:before’和’:after’

如果想要光标在内容的后面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.class:before {
	content: ''
}

.class:after {
	content: '';
	border-right: 2px solid #ffd500;
	height: 50%;
	opacity: 1;
	animation: focus .7s forwards infinite;
}

@keyframes focus {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

如果想要光标在内容的前面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.class:before {
	content: ''
	border-right: 2px solid #ffd500;
	height: 50%;
	opacity: 1;
	animation: focus .7s forwards infinite;
}

.class:after {
	content: '';
}

@keyframes focus {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}