Ivan Bogachev

не могу найти в поиске

SVG-маски, маски с помощью clip-path в CSS, маски на канвасе, маски в шейдерах, и.т.д. В общем гуглите все, что связано со словом "маска". Вариант с шейдерами самый производительный, с SVG - самый простой.

Пример с SVG:


Пример с шейдерами (не совсем такой, но для передачи идеи пойдет):

.arrow-left span {
    /*border-bottom: 3px solid #ff3140;
    border-left: 3px solid #ff3140;*/
    border-right: 3px solid #ff3140;
    border-top: 3px solid #ff3140;
}

/*.arrow-left span:nth-child(3){*/
.arrow-left span:nth-child(1){
    animation-delay: -0.2s;
}

До того, как IE/Edge стал хромиумным, он не умел работать с clip-path. Соответственно clip-path был "модным решением не для серьезного продакшена". Сейчас стало получше, но привычки так быстро не уходят. Да и не все компании поддерживают исключительно вечнозеленые браузеры. Есть отдельные инертные ниши, в которых пользователи не обновляются так быстро, как хотелось бы веб-евангелистам. В данном контексте SVG - это надежность.

Свойство display- не анимируемое. С ним ничего не сделать. Можно плавно менять opacity от 1 до 0 и добавлять pointer-events: none, чтобы элементы уходили из под мыши и с ними нельзя было взаимодействовать. Ну и, раз у вас скрипты используются для этого - в конце анимации, когда уже элементы не видны, можно добавить display: none, если на это свойство что-то еще завязано. При появлении - все в обратную сторону - pointer-events: auto и возвращаем opacity.

Можно все то же самое делать в CSS, из скриптов только классы дергать - это будет более удобным решением для дальнейшей поддержки (когда много CSS меняется в скриптах - обычно начинаются сложности с пониманием происходящего и вынужденное перебивание стилей).

SVG-маски - наше все. Хотя в этом случае вариант с clip-path тоже очень даже рабочий. Еще есть вариант маски на шейдерах, но это совсем особый случай, хотя может внезапно оказаться очень производительным.

В translate3d третий параметр (по оси Z) не может быть задан в процентах. Это и логично - у DOM-элемента нет толщины, от которой считать проценты. Первые два (по осям X и Y) - можно задавать в процентах, с этим проблем нет.

Но я как-то уже делал такое не прибегая к псевдо. Забыл(((

Как вариант можно линейными градиентами все нарисовать, с помощью border-image:

.menu-item {
    border-image: linear-gradient(to bottom, transparent 0%, #fff 50%, transparent 100%) 1;
    border-width: 0 0 0 1px;
    border-style: solid;
}

.menu-item:last-child {
    border-width: 0 1px 0 1px;
}

В общем случае можно градиентами на фоне вообще все, что угодно нарисовать.

Общая концепция будет примерно такая:

@keyframes custom-fade-in {
    0% {
        stroke-dasharray: 0 300;
        fill: transparent;
        animation-timing-function: ease-in;
    }
    50% {
        stroke-dasharray: 150 150;
        fill: transparent;
        animation-timing-function: ease-out;
    }
    100% {
        stroke-dasharray: 300 0;
        fill: #000;
    }
}

path {
    stroke: #000;
    fill: none;
    stroke-dasharray: 0 300;
    animation: custom-fade-in 2s ease-in-out infinite;
    animation-fill-mode: forwards;
}

Но если взять контуры как есть, то они будут заливаться не там, где нужно по дизайну. Нужно открыть эту SVG в векторном графическом редакторе и слегка порезать эти контуры. Нужно чтобы каждая буква была обрисована линией по кругу один раз, а не два, как сейчас. Тогда заливка будет по всей букве. А то сейчас заливается пространство между двумя почти продублированными контурами букв, т.к. технически именно оно является внутренной частью path. А еще будет удобно каждую букву делать отдельным контуром - проще будет подобрать значения для stroke-dasharray.

У вас неправильный синтаксис keyframes - двоеточия и лишние скобки. Должно быть как-то так:

@keyframes load {
    0% {
        width: 0%;
        background: #f00;
    }
    50% {
        width: 70%;
        background: #00f;
    }
    100% {
        width: 100%;
        background: #0f0;
    }
}

Можно заменить тень на фильтр:



Но такие штуки не отличаются хорошей кроссбраузерностью, а светлое будущее наступило еще не везде, так что в общем случае я бы рекомендовал использовать SVG-картинки.

Саму птицу, как уже верно заметили, можно соорудить на WebGL. Как пример подобной штуки, только без частиц вокруг и без ядреного шума на самих крыльях:

Технически можно использовать практически все unicode символы, за исключением самых первых, управляющих. То есть это не только буквы, но и всевозможные символы вроде ∑∜♫ и.т.д. Они могут отсутствовать в каких-то шрифтах, но на функциональность CSS не повлияют. Как говорил Chris Coyier еще 10 лет назад: "yes-it-works-in-IE6™ & yes-it-validates™".

Другой вопрос - это практичность использования "альтернативных" селекторов. Тут есть несколько минусов:

• Есть устоявшиеся английские названия для всех стандартных элементов интерфейса и вспомогательных оберток. Использование других названий (в том числе на другом языке) приведет к потере скорости чтения кода, придется привыкать к новым именованиям.
  
• Придется постоянно переключаться между раскладками при написании кода. Минус к удобству.
  
• В любимой IDE вашего коллеги может быть шрифт, не поддерживающий ваши альтернативные non-ascii символы. Ему будет плохо.
  

Так что да, использовать можно, но как только у вас появятся коллеги, ваш код скорее всего начнут сравнивать с языком YoptaScript и вам придется переучиться на использование английского, чтобы "быть как все" и соответствовать общепринятым стандартам.

Вы не указали % у первого фрейма. Безразмерное значение "0" некорректно. Умные браузеры могут добавить символ процента за вас, или могут просто пропустить "дефектный" фрейм, из-за чего будет казаться, что все работает, но полагаться на это не стоит.

Можно убрать у второй кнопки z-index, он там все равно не нужен:

.btn1 {
	// z-index: 1;
}

Вариантов в целом много. Если пойти по пути псевдоэлементов с абсолютным позиционированием и аккуратного выравнивания, то получится что-то такое: