CSS/Javascript, как стиль курсора в поле ввода?

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

Это не стиль ввода текста, это вещь. Вместо этого они используют текстовый ввод для запуска javascript, который отображает анимированные элементы DOM. Этот уровень настройки не может быть выполнен только с помощью 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> 

Быстрый способ найти его в хроме, чтобы щелкнуть правой кнопкой мыши на элементе в инспекторе и заставить элемент в a :focus состояние.