10个常见渐变交互效果

1、透明度渐变背景交互

<div class="fade-background"></div>

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、渐变背景文字交互

<h1 class="gradient-text">Hello, World!</h1>

.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、鼠标跟随渐变交互

<div class="follow-gradient"></div>

.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、渐变按钮交互

<button class="gradient-button">Click Me</button>

.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、渐变边框动画交互

<div class="border-animation"></div>

@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、文字渐变动画交互

<h1 class="text-animation">Hello, World!</h1>

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

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

7、渐变阴影交互

<div class="gradient-shadow"></div>

.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、渐变背景缩放交互

<div class="scale-background"></div>

.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、渐变背景旋转交互

<div class="rotate-background"></div>

.rotate-background {width: 200px;height: 200px;background: linear-gradient(to right, red, blue);transition: transform 0.5s ease;
}.rotate-background:hover {transform: rotate(180deg);
}

说明：这个案例创建了一个矩形区域，当鼠标悬停时，背景渐变会顺时针旋转180度。

10、渐变背景模糊交互

<div class="blur-background"></div>

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

说明：这个案例创建了一个矩形区域，当鼠标悬停时，背景渐变会模糊化，形成一个柔和的效果。