输入光标闪烁 [英] Input cursor that is blinking
本文介绍了输入光标闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我无法使输入光标闪烁。如何制作动画,使光标 |输入字段(占位符)中的指示灯持续闪烁。
我的代码是这样的:
i am having trouble with making the input cursor to blink. How do you make an animation that the cursor "|" inside the input field (placeholder) keeps blinking. The code that i have is this:
<input type="text" class="rq-form-element" placeholder="|"/>
我不知道该如何开始。有建议吗?
I have no idea on how to get this even started. Any suggestions?
推荐答案
尝试此解决方案
<div class="cursor">
<input type="text" class="rq-form-element" />
<i></i>
</div>
CSS
.cursor {
position: relative;
}
.cursor i {
position: absolute;
width: 1px;
height: 80%;
background-color: gray;
left: 5px;
top: 10%;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
opacity: 1;
}
.cursor input:focus + i {
display: none;
}
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
实时演示- https://jsfiddle.net/dygxxb7n/
这篇关于输入光标闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文