CSS |更改按钮/图像悬停状态的动画

1. 更改悬停状态下按钮的颜色/大小。
   方法：
   • 设置悬停状态的动画和持续时间
   • 使用@keyframes设置背景颜色

   句法：

   button:hover {
       animation-name: background-color;
       animation-duration: 500ms;
       }
   
       @keyframes background-color {
           100% {
           background-color:#4065F3;
       }
   }

   例子：

   
   
     
   
       Color Change of button on hovering
   
   
     
   
       
   
       
   
       GeeksforGeeks
   
     
   
   

   输出：
   最初按钮看起来像这样：
   

   悬停时它会更改为：
   

2. 更改悬停状态下图像的颜色/大小。
   方法：
   • 设置悬停状态的动画和持续时间
   • 使用@keyframes设置图像大小

   句法：

   img:hover {
          animation-name: breadth;
          animation-duration: 500ms;
        }
   
         @keyframes breadth {
         50% {
          width: 400px;
         }
         100% {
          width: 600px;
         }
       }

   
   
     
   
     Size Change of image on hovering
     
   
     
   
       
   
     
   
   

   输出：
   最初图像的大小是这样的：
   

   在悬停时，它的大小在一半的持续时间减少到这个：
   

   然后在持续时间完成后再次恢复到原始大小：