Как встряхнуть изображение с помощью ключевого кадра CSS?

Опубликовано: 20 Февраля, 2023

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

Дрожащее изображение или эффект дрожания на изображении используется для придания веб-сайту более динамичного и привлекательного вида. Этот эффект можно применять к изображениям с помощью правил @keyframes, что обеспечивает больший контроль над анимацией, которую мы хотим выполнять на веб-страницах.

Подход: эффект встряхивания изображений можно создать с помощью HTML. и CSS , сначала мы будем вставлять изображение с помощью тега <img> в HTML, затем мы будем использовать правило @keyframes для указания кода анимации.

Код HTML: Используя HTML, мы вставим изображение на нашу веб-страницу.

индекс.html:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Shake image in CSS</title>
    <link rel="stylesheet" 
          href="styles.css">
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
          How to shake an image using CSS Keyframe
      </h3>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221117164353/gfg.jpeg" 
         alt="GFG_img">
</body>
  
</html>

Код CSS: в этом разделе кода сначала мы установим высоту и ширину изображения, а затем, чтобы применить эффект дрожания, мы будем использовать @keyframes. правило, сначала мы создадим анимацию с именем Shake под эффектом наведения, затем мы будем использовать свойство преобразования для поворота изображения по часовой стрелке и против часовой стрелки попеременно. Если мы будем наводить курсор на изображение, изображение будет казаться дрожащим. Ниже приведены используемые свойства CSS с их кратким описанием:

анимация: используется для применения анимации к тексту, изображению или любому элементу div или контейнеру.
background-image: используется для установки фона веб-страницы, здесь мы использовали функцию линейного градиента для установки фона веб-страницы.
ключевые кадры: используется для установки анимации элементов, и мы можем менять стили CSS из одного набора в другой.
преобразование: используется для поворота элемента, мы можем установить степень, в которой мы хотим повернуть элемент.

стили.css:

CSS

body {
    padding: 10px 20px;
    text-align: center;
    background-image: linear-gradient(to right, rgba(193, 245, 133, 0), 
                                                  rgba(91, 251, 77, 0.903));
}
  
img {
    height: 50%;
    width: 50%;
    margin: auto;
}
  
img:hover {
    animation: Shake 0.5s linear infinite;
}
  
/*Using keyframes for shaking an image*/
@keyframes Shake {
    0% {
        transform: rotate(5deg);
    }
  
    25% {
        transform: rotate(-6deg);
    }
  
    50% {
        transform: rotate(5deg);
    }
  
    75% {
        transform: rotate(-6deg);
    }
  
    100% {
        transform: rotate(5deg);
    }
}

Выход:

Technical Scripter Picked CSS

Как встряхнуть изображение с помощью ключевого кадра CSS?

HTML

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ