Как добавить плавность на hover?
Уже запарился, не получается
кто мож подскажет?
a { display: inline-block; color: rgb(255, 255, 255); font-size: 15px; font-weight: 700; line-height: 110%; letter-spacing: 0%; background: linear-gradient(42.48deg, rgb(251, 67, 0) 29.177%, rgb(251, 83, 0) 42.639%, rgb(251, 125, 0) 68.896%, rgb(251, 161, 0) 88.559%); padding: 20px 45px; margin-top: 55px; text-decoration: none; position: relative; overflow: hidden; transform-origin: center; animation: pulse 2s infinite alternate; transition: transform 0.5s ease; /* добавляем плавный переход для transform при наведении */ } @keyframes pulse { 0%, 70% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.2) rotate(-4deg); } } a::before { width: 30px; height: 100%; position: absolute; left: -30px; top: 0px; content: ""; background: rgba(255, 255, 255, 0.15); animation: moveBefore 4s infinite; } @keyframes moveBefore { 0%, 90% { left: -30px; } 100% { left: 100%; } } a:hover { transform: scale(1.2) rotate(-4deg); animation: none; } } |
a { display: inline-block; color: rgb(255, 255, 255); font-size: 15px; font-weight: 700; line-height: 110%; letter-spacing: 0%; background: linear-gradient(42.48deg, rgb(251, 67, 0) 29.177%, rgb(251, 83, 0) 42.639%, rgb(251, 125, 0) 68.896%, rgb(251, 161, 0) 88.559%); padding: 20px 45px; margin-top: 55px; text-decoration: none; position: relative; overflow: hidden; transform-origin: center; animation: pulse 2s infinite alternate; transition: transform 0.5s ease; /* добавляем плавный переход для transform при наведении */ } @keyframes pulse { 0%, 70% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.2) rotate(-4deg); } } a::before { width: 30px; height: 100%; position: absolute; left: -30px; top: 0px; content: ""; background: rgba(255, 255, 255, 0.15); animation: moveBefore 4s infinite; } @keyframes moveBefore { 0%, 90% { left: -30px; } 100% { left: 100%; } } a:hover { transform: scale(1.2) rotate(-4deg); animation: none; } }
Дополнительно:
что-то мне кажется что никак, т.к. анимации и переходы разные звери и совместить их вместе сложно
единственно, может поможет добавление forwards в animation, но это не точно
так почему то с редактора переносится сюда
А ну и древнейшего холивара ради.
Проще нажать одну кнопку и получить отступ в 4 (в 90% редакторах) пробела,
так все и делают
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления плавного эффекта при наведении курсора на элементы веб-страницы можно использовать CSS-свойство transition. Это позволяет плавно изменять значения CSS-свойств при определенных событиях, таких как :hover.
Пример использования transition для плавного изменения цвета фона при наведении на элемент:
.element { background-color: #fff; transition: background-color 0.3s ease; } .element:hover { background-color: #f00; }
В данном примере при наведении на элемент с классом "element" цвет фона будет плавно изменяться с белого (#fff) на красный (#f00) за 0.3 секунды с эффектом плавности.
Вы также можете использовать transition для плавного изменения других свойств, таких как размер, положение, прозрачность и другие. Просто укажите нужные свойства в списке transition и задайте длительность и функцию сглаживания (ease, ease-in, ease-out, ease-in-out и другие).
Например, для плавного изменения размера элемента при наведении:
.element { width: 100px; height: 100px; transition: width 0.3s ease, height 0.3s ease; } .element:hover { width: 150px; height: 150px; }
Таким образом, используя CSS-свойство transition, вы можете легко добавить плавные эффекты при взаимодействии пользователя с элементами вашего сайта.