css模拟input光标 |css横向二级导航

/* 第一步：定义input框 */
input{
border: none;
outline: none;
background: transparent;
font-size: 18px;
padding: 5px 10px;
position: relative;
}
/* 第二步：定义光标 */
input::before{
content: "";
height: 20px;
width: 2px;
background-color: black;
position: absolute;
top: 50%;
transform: translateY(-50%);
animation: cursor 1s infinite;
}
/* 第三步：定义动画 */
@keyframes cursor{
0%{
left: 0;
opacity: 0;
}
50%{
opacity: 1;
}
100%{
left: 100%;
opacity: 0;
}
}

使用以上代码便可在input框内模拟出光标的效果。其中，第一步和第二步分别定义了input框和光标的样式，第三步定义了光标的动画，让它在输入框内无限循环来模拟真正的光标。