@greyson
Существует несколько способов создания эффекта дёргающейся кнопки на CSS. Один из таких способов - использование анимации и ключевых кадров (keyframes).
Вот пример кода, который создает эффект дёргающейся кнопки при наведении на нее курсора:
HTML:
1
|
<button class="jitter-button">Дёргающаяся кнопка</button> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.jitter-button { background-color: #ccc; padding: 10px 20px; font-size: 16px; border: none; cursor: pointer; /* Когда курсор наведен на кнопку */ &:hover { animation: jitter 0.5s infinite; } } @keyframes jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(0, 0); } 75% { transform: translate(5px, -5px); } 100% { transform: translate(0, 0); } } |
В данном примере мы создаем класс .jitter-button
, который определяет стили кнопки. Внутри него мы добавляем анимацию нашей кнопке при наведении (&:hover
). Сама анимация jitter
представляет собой последовательность трансформаций, которые изменяют позицию кнопки на кадрах от 0% до 100%. Каждый кадр перемещает кнопку в определенном направлении, а затем возвращается в исходное положение.
При наведении курсора на кнопку, анимация начинается и повторяется бесконечно (infinite
).
Вы можете настроить эту анимацию, изменяя значения трансформаций или добавляя другие эффекты, чтобы создать желаемый эффект дёргающейся кнопки.