10个常见渐变交互效果

1、透明度渐变背景交互

Copy
.fade-background {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  transition: background 0.5s ease;
}

.fade-background:hover {
  background: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
}

说明：这个案例创建了一个矩形区域，当鼠标悬停时，背景从完全透明到纯红色渐变，再从纯红色渐变到完全透明。

2、渐变背景文字交互

Hello, World!

.gradient-text {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.5s ease;
}

.gradient-text:hover {
  background: linear-gradient(to right, blue, red);
}

说明：这个案例创建了一个标题，当鼠标悬停时，文字颜色从红色渐变到蓝色，并且背景渐变也相应改变。

3、鼠标跟随渐变交互

.follow-gradient {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, blue);
  position: relative;
}

.follow-gradient:before {
  content: "";
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.5s ease;
}

.follow-gradient:hover:before {
  background: linear-gradient(to right, blue, red);
}

说明：这个案例创建了一个正方形区域，在其中心有一个小白点。当鼠标悬停时，小白点的颜色从白色渐变到蓝色和红色。

4、渐变按钮交互

Click Me

.gradient-button {
  background: linear-gradient(to right, red, blue);
  border: none;
  color: white;
  padding: 10px 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.gradient-button:after {
  content: "";
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transform: skewX(45deg);
  transition: transform 0.5s ease;
}

.gradient-button:hover {
  transform: scale(1.2);
}

.gradient-button:hover:after {
  left: 100%;
}

说明：这个案例创建了一个渐变按钮，当鼠标悬停时，按钮会放大并展示一个斜切的渐变背景。

5、渐变边框动画交互

@keyframes border-animation {
  0% {
    border-color: red;
  }
  50% {
    border-color: blue;
  }
  100% {
    border-color: red;
  }
}

.border-animation {
  width: 200px;
  height: 200px;
  border: 2px solid red;
  animation: border-animation 3s infinite;
  }

说明：这个案例创建了一个矩形区域，边框颜色会在红色和蓝色之间循环变化，形成一个动画效果。

6、文字渐变动画交互

Hello, World!

@keyframes text-animation {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: red;
  }
}

.text-animation {
  animation: text-animation 3s infinite;
}

说明：这个案例创建了一个标题，文字颜色会在红色和蓝色之间循环变化，形成一个动画效果。

7、渐变阴影交互

.gradient-shadow {
  width: 200px;
  height: 200px;
  background: red;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.5s ease;
}

.gradient-shadow:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.4);
}

说明：这个案例创建了一个矩形区域，当鼠标悬停时，阴影效果从浅到深渐变，形成一个立体感。

8、渐变背景缩放交互

.scale-background {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, blue);
  transition: background-size 0.5s ease;
}

.scale-background:hover {
  background-size: 200% 200%;
}

说明：这个案例创建了一个矩形区域，当鼠标悬停时，背景渐变会放大到原来的两倍大小。

9、渐变背景旋转交互