使用css及动画实现按钮的动态效果

要使用CSS和动画实现按钮的动态效果，你可以创建一个带有边框动画的按钮，使其在用户悬停时显示动态的边框效果。以下是一个简单的例子：

HTML:

<button class="dynamic-button">Hover Over Me!</button>

CSS:

.dynamic-button {
  background-color: #4CAF50; /* Green background */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.5s; /* Transition background color */
  overflow: hidden; /* Required for the border animation */
}
 
.dynamic-button:hover {
  background-color: #3e8e41; /* Darker green on hover */
}
 
.dynamic-button:hover:after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, transparent, #fff, transparent);
  animation: animate 2s linear infinite; /* Animation */
}
 
@keyframes animate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

这段代码定义了一个按钮，当用户将鼠标悬停在按钮上时，会有一个从左至右的动画边框效果。按钮背景色在悬停时会有变化，增加了交互的视觉反馈。