如何在HTML中插入闪烁的光标(例如DOS中闪烁的粗下划线或Linux中的竖线)?
该字符/图像将跟随H1标题,在不同大小的情况下都应该显示良好。
如何在HTML中插入闪烁的光标(例如DOS中闪烁的粗下划线或Linux中的竖线)?
该字符/图像将跟随H1标题,在不同大小的情况下都应该显示良好。
Fiddle
。h1 {
font-size: 20px;
padding-right: 20px;
display: inline-block;
}
h1:after {
content: '';
width: 20px;
height: 2px;
background: black;
opacity: 0;
display: inline-block;
animation: blink 1s linear infinite alternate;
}
@keyframes blink {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1>Lorem ipsum dolor sit amet</h1>
setInterval(function() {
$('span').animate({
opacity: 1
}, 600).animate({
opacity: 0
}, 600)
}, 1200);
h1 {
font-size: 20px;
padding-right: 20px;
display: inline-block;
}
h1 span {
width: 20px;
margin-bottom: -1px;
height: 2px;
background: black;
opacity: 0;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Lorem ipsum dolor sit amet <span></span></h1>
您无法使用几行代码来完成此操作 没有库可以做到这一点。您可以使用JavaScript制作一个虚拟光标。
步骤1
通过以下方式隐藏主光标:
caret-color: transparent;
步骤 2
创建一个 元素
<input type="text"><span id="fake">_</span>
仅使用HTML元素上的contenteditable属性怎么样?
只有在用户单击元素时才会起作用,但它可以“免费”地工作,无需任何JS、CSS等。
示例:
<h1 contenteditable="true">Edit me</h1>
[...]
<span style="background:#00ff00" id="c"> </span>` - flith