Question

我一直在挖掘wallbase.cc的来源，试图找出如何设置输入框的样式，就像在他们的主页上那样。我主要关注的是快速闪烁的光标，以及看似动画的文本。

Answer 1

From a quick glance at the source code, it looks like they're using a jQuery plugin called Fancy Input

Answer 2

他们根本没有设计文本输入的样式。相反，他们使用文本输入来触发呈现动画DOM元素的javascript。仅使用CSS无法实现此级别的自定义。

如果键入一个，然后检查DOM，您将看到这些元素作为文本输入的兄弟节点：

<div>
    <span>t</span>
    <span>e</span>
    <span>s</span>
    <span>t</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>&nbsp;</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <b class="caret" style="height: 25px;"></b>
</div>

当您键入或删除字符时，javascript会将每个字符添加或删除为新的<span>元素，然后将<b class="caret">元素放在最后，即动画闪烁光标。

不是每个角色都是唯一的元素，也不是插入符号，它们可以animated with CSS transitions。过渡允许动画大小和不透明度等动画，这正是他们正在做的事情。

Answer 3

插入符号正在使用动画。除了一些继承的样式，这些是它的两个主要类（处于悬停状态）：

.searchmainbar .maininput:focus ~ div .caret {
    opacity: .8;
    box-shadow: 0 0 8px #fff;
    -webkit-animation: 0.4s 40ms caret infinite;
    animation: 0.4s 40ms caret infinite;
}

.searchmainbar .maininput:focus ~ div .caret {
    opacity: .8;
    box-shadow: 0 0 8px #fff;
    -webkit-animation: 0.4s 40ms caret infinite;
    animation: 0.4s 40ms caret infinite;
}

/* Character animation */
.fancyInput>div span {
    -webkit-transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
    transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
    display: inline-block;
    position: relative;
}

@keyframes caret{50%{opacity:0.1;transform:scaleY(0.8)}}

<div><span>H</span><b class="caret" style="height: 25px;">&#8203</b></div>

在chrome中查找它的一种快捷方法是右键单击检查器中的元素并强制该元素进入:focus状态。

CSS / Javascript，如何在输入框中设置光标的样式？

3 个答案: