1

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

4

3 回答 3

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;">​&lt;/b>
</div>

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

并不是说每个字符都是一个独特的元素，就像插入符号一样，它们可以使用 CSS 过渡进行动画处理。过渡允许诸如大小和不透明度之类的动画，这正是他们正在做的事情。

于 2013-09-06T00:42:03.287 回答
1

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

.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​&lt;/b></div>

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

于 2013-09-06T00:43:21.433 回答