颤动渐变边框

简介

颤动渐变边框是一种动态效果，可以让边框带有微小的颤动和渐变的变化，以增加页面的动态感和用户体验。这种效果可用于按钮、卡片、模态框等网页元素。

实现方式

实现颤动渐变边框需要使用 CSS 动画和渐变。以下是一段使用 CSS 的简单实现：

/* 使用 CSS 变量定义颜色 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2c3e50;
}

/* 定义渐变的颜色 */
.gradient {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

/* 定义边框动画 */
.border-animation {
  position: relative;
  z-index: 1;
}
.border-animation:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--primary-color);
  transition: transform 0.2s ease-in-out;
  filter: blur(4px);
}

/* 定义边框颤动动画 */
.border-animation:hover:before {
  transform: translate3d(-3px, -3px, 0);
}

/* 定义渐变颜色动画 */
.gradient:hover {
  background-size: 400% 400%;
  -webkit-animation: GradientAnimation 9s ease infinite;
  -moz-animation: GradientAnimation 9s ease infinite;
  animation: GradientAnimation 9s ease infinite;
}

@-webkit-keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

效果演示

以下是一个使用颤动渐变边框的按钮的演示：

颤动渐变边框按钮

总结

颤动渐变边框可以通过 CSS 动画和渐变来实现，具有良好的动态效果和用户体验，可以在网站的按钮、卡片、模态框等元素中使用。实现时需注意控制动画的适度性，以不影响用户体验。