css 实现光标的闪烁效果
时间: 2024-05-04 10:19:51 浏览: 12
可以使用CSS3的动画效果来实现光标的闪烁效果。
首先,需要定义一个光标的样式,可以使用伪元素`::after`或`::before`来实现:
```css
.cursor {
position: relative;
display: inline-block;
}
.cursor::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #000;
}
```
然后,使用`@keyframes`定义闪烁动画的效果:
```css
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```
最后,将动画应用到光标上:
```css
.cursor::after {
/* 其他样式 */
animation: blink 1s infinite;
}
```
这样就可以实现光标的闪烁效果了。完整代码如下:
```css
.cursor {
position: relative;
display: inline-block;
}
.cursor::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #000;
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```