Чистый CSS для создания кнопки «глюк ветра» в Cyberpunk 2077

CSS
Чистый CSS для создания кнопки «глюк ветра» в Cyberpunk 2077

Привет, меня зовут Стивен.

Хотя я не играю в игры, я знаюКиберпанк 2077Эта игра на своей веб-странице имеетAvailable Nowкнопка, при наведении на нее курсора возникает эффект глюка вроде глюка.

В этом выпуске мы будем имитировать и добиваться этого эффекта.

Видеоверсия этого урока находится по адресувооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо поДобро пожаловать три подряд внимание!

Написать HTML-код

Откройте редактор CodePen (codepen.io), добавьте его в раздел HTML<button>метка, название кнопки ДОСТУПНО СЕЙЧАС.

Разделы CSS

Затем перейдите в раздел CSS и добавьтеbodyLabel, используйте метод Flexbox, чтобы настроить содержимое по центру вверх, вниз, влево и вправо. Затем цвет фона, установленный на желтый, добавьтеbuttonселектор с шириной, установленной на380px, а высота установлена ​​на86px, установлен размер текста36px.

Затем я хочу изменить шрифт, перейти на веб-сайт Google Font, выбрать шрифт Bebas Neue, вставить код для загрузки шрифта в HTML, а затем применить настройки шрифта CSS к селектору кнопок.

Ок, что можно сделать, чтобы нижний левый угол был скошенным, сначала хотел использоватьclip-pathЧтобы добиться этого, но я думал и думал, кажется, есть более легкий путь, который черезlinear-gradientУстановите также фоновое изображение. настраиватьbackgroundдаlinear-gradient(), установлен угол45deg, то по прозрачному цвету50%, переключиться на красный50%,так50%Передняя часть будет прозрачной, а50%Последняя часть окрашена в красный цвет для достижения эффекта цветовой сегментации.

Затем мы хотим, чтобы красная часть составляла большинство, просто нужно поставить50%изменить на5%, можно сделать нижний левый скос.

Затем устанавливается линия кадра0, цвет текста установлен на белый,letter-spacingКернинг настроен на3pxИ затем я чувствую, что немного вверх и вниз по выравниванию текста, установитеline-heightда88px, как лучше.

Затем установите ярко-синий край справа и установитеbox-shadowустановить как6px 0px 0px #00E6F6, а потомoutlineустановить какtransparent, так что при нажатии кнопки не будет заданной браузером границы кнопки.

Теперь, когда стиль кнопки в основном реализован, как реализовать эффект сбоя при наведении на нее курсора? Мы сначала накладываем идентичную кнопку на эту кнопку Для этого я буду использовать селектор псевдокласса Pseudo.

Реализуйте слой, меняющий цвет

Присоединяйсяbutton::afterселектор, будетcontentустановить какAVAILABLE NOW, тогда пустьdisplayустановить какblock,positionустановить какabsolute, когда здесьpositionустановить какabsolute, мы возвращаемся кbuttonВ селекторе естьpositionустановить какrelative, чтобы его можно было расположить в соответствии с кнопкой, а затем настроить вверх, вниз, влево и вправо, чтобы0, остальные стили такие же, как у исходной кнопки, поэтому вbuttonПосле селектора добавьте запятую,button::afterВот и все.

Эта кнопка сверху, мы пройдемclip-path(), обрезать некоторые из них, а затем подогнатьtransformСделайте некоторое смещение, а затем пройдите черезanimationдля достижения эффекта анимации. Поэтому сначала мы применим к этому слою эффект обесцвечивания.Во-первых, нижний левый угол выделим синим цветом и изменим пропорцию прозрачного цвета на3%, затем добавьте ярко-синий в середине, заданный3%к5%, а затем текст в середине, добавьтеtext-shadowДля тени текста добавьте желтый цвет слева и синий справа, вот и все.

Графическая резка

Следующим шагом нужно заняться частью сегментации графики, добавивclip-path, применятьinset(), в нем есть 4 значения настройки, которые представляют верхний правый, нижний левый и насколько сжиматься внутрь. сначала установить на80% -6px 0 0, право установлено на-6pxПричина в том, что справа есть ярко-синяя рамка, а так как она не учитывается в границах контейнера, то необходимо установить право на отрицательное число.

Поскольку сейчас он находится в полностью перекрывающемся состоянии, неясно, обрезан ли он.transform: translate(-20px, 10px)Немного отодвиньтесь, и вы четко увидите, какая часть отрезается. Сначала сохраните этот фрагмент в переменной CSS с именемslice-1.

Стоимость второго среза50% -6px 30% 0, хранится какslice-2. Стоимость третьего среза10% -6px 85% 0, часть выше, сохраненная какslice-3. Стоимость четвертого среза40% -6px 43% 0, все текстовые части, сохраненные какslice-4. Просто сделайте еще один срез, пятое значение80% -6px 5% 0, Это нижняя часть, хранящаяся какslice-5.

Добавьте еще одно значение по умолчанию,50% 50% 50% 50%, хранится какslice-0, то вот мыclip-pathЗначение параметра изменяется наvar(--slice-0), и воляtransformПросто удалите его.

На самом деле положение и количество сделанных здесь срезов довольно случайны, и вы можете изменить значение в соответствии с желаемым эффектом.

анимация

Наконец, для части анимации добавьте@keyframes glitchОпределите анимацию с именемglitch, здесь я разделил на 11 частей,0%，10%，20%, и так далее, пока100%. Затем установите каждую частьclip-path()а такжеtransform(),clip-path()просто применить фрагмент наугад, иtransform()Просто определите несколько случайных значений и немного переместите их.

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

keyframesЧасть установлена, добавитьbutton:hover::afterСелектор, когда курсор перемещается по кнопке, запускает анимацию, устанавливаяanimation,время1секунд, название анимацииglitch. Попробуйте, в принципе работает.

Однако это эффект сбоя, как анимация может быть такой плавной, мы добавляем для нее настройку, чтобы она сильно застревала. настраиватьanimation-timing-function 为 steps(2, end), чем меньше цифра, тем больше застрял, можно попробовать.

Давайте посмотрим на завершенный эффект этого случая

Это все для этого эпизода.

Пожалуйста, обратите вниманиеМинимальный класс CodingStartup:

Категории